Angular Material Layout

HTML

<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.js"></script>
<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/angular-messages/1.5.7/angular-messages.js"></script>
<script type="text/ng-template" id="modalTpl.html">

  <md-dialog style="width: 90%">
    <md-toolbar>
      <div class="md-toolbar-tools">
        <h2>Modal with form</h2>
        <span flex></span>
        <md-button ng-click="modal.close()">
          x
        </md-button>
      </div>
    </md-toolbar>
    <md-dialog-content>
      <div class="md-dialog-content">
        <form name="modal.dynamicForm" flex="80" layout="column">
          <md-input-container ng-repeat="field in modal.model.fields">
            <ng-form name="innerForm">
              <label>{{ field.label }}</label>
              <input type="text" ng-model="field.value" name="{{ field.name }}" ng-pattern="field.pattern" required />
              <div ng-messages="innerForm[field.name].$error" multiple>
                <div ng-message="required">Field is required</div>
                <div ng-message="pattern">{{ field.patternError }}</div>
              </div>
            </ng-form>
          </md-input-container>
        </form>
      </div>
    </md-dialog-content>
    <md-dialog-actions layout="row">
      <span flex></span>
      <md-button class="md-primary md-raised" ng-disabled="modal.dynamicForm.$invalid" ng-click="modal.close()">
        Save
      </md-button>
    </md-dialog-actions>
  </md-dialog>

</script>

<div ng-controller="MainController as main">
  <md-button ng-click="main.openModal()">
    Open...

JavaScript

angular.module('app', ['ngMaterial', 'ngMessages']);

angular.module('app')
  .controller('MainController', ['$mdDialog', MainController])

function MainController($mdDialog) {
  var self = this;

  self.openModal = function() {
    $mdDialog.show({
      controller: ['$mdDialog', ModalController],
      controllerAs: 'modal',
      templateUrl: 'modalTpl.html',
      parent: angular.element(document.body),
      clickOutsideToClose: true
    });
  }
}

function ModalController($mdDialog) {
  var self = this;

  self.close = function() {
    $mdDialog.cancel()
  }

  self.model = {
    fields: [{
      value: '',
      name: 'test',
      pattern: /^\d+$/,
      patternError: 'Must be a number!',
      label: 'Enter positive number'
    }]
  }
}