<md-dialog aria-label="Designation Template" style="width:520px;height:205px;">
    <form ng-cloak name="myForm">

        <md-toolbar>
            <div class="md-toolbar-tools">
                <h2>{{addDesignationDialogTitle}}</h2>
                <span flex></span>
                <md-button class="md-icon-button" ng-click="cancel()">
                    <i class="fa fa-times fa-2x" style="margin-top: 5px; font-size: 1.5em; float: left"></i>
                </md-button>
            </div>
        </md-toolbar>

        <md-dialog-content>
            <div class="md-dialog-content">
                <div class="form-group">
                    <div class="row">
                        <input type="text" class="form-control" id="designationName" name="designationName"
                            ng-model="newDesignationName" placeholder="designation name (contains alphanumerics, space, -)" ng-disabled="false" />
                        <div role="alert" style="text-align: center">
                            <span class="error" style="color: red;">{{newDesignationValidationMessage}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </md-dialog-content>

        <md-dialog-actions layout="row">
            <md-button class="md-raised md-accent" ng-click="cancel()" style="width:120px;">
                Cancel </md-button>
            <md-button class="md-raised" ng-click="addDesignation()" style="width:120px;">
                ADD </md-button>
        </md-dialog-actions>

    </form>
</md-dialog>