Angularjs ngMessage not showing

Question

I created a directive to compare password and confirm password fields and show error message if it won't match.

(function () {
    'use strict';
    var compareTo = function () {
        return {
            require: "ngModel",
            scope: {
                otherModelValue: "=compareTo"
            },
            link: function (scope, element, attributes, ngModel) {

                ngModel.$validators.compareTo = function (modelValue) {
                    return modelValue == scope.otherModelValue;
                };

                scope.$watch("otherModelValue", function () {
                    ngModel.$validate();
                });
            }
        };
    };
   angular.module('StarterApp').directive("compareTo", compareTo);

})();

My HTML:

                    <form name="updatePwdForm" novalidate>
                        <md-input-container class="md-block">
                            <label for="password">Password:</label>
                            <input type="password" name="password" ng-model="ctrl.updatepassword.password" />
                        </md-input-container>

                        <md-input-container class="md-block">
                            <label for="confirmPassword">Confirm Password:</label>
                            <input type="password" name="confirmPassword" label="confirmPassword" ng-model="ctrl.updatepassword.confirmpassword"  required 
                             compare-to="ctrl.updatepassword.password"  />
                            <div ng-messages="updatePwdForm.confirmPassword.$error" style="color:maroon" role="alert">
                                <div ng-message="required">Password and Confirm Password are not same!</div>                                  
                            </div>
                        </md-input-container>

                        <md-button class="md-raised md-primary"  ng-disabled="updatePwdForm.$invalid" ng-click="ctrl.updatePassword()">Update</md-button>

                    </form>
                </md-content>

I am sure that my directive is comparing values and returning false if it won't match because my button is in disable mode still i type correct confirmpassword, but it's not showing my ngMessage. am i missing something? Thanks in advance.

Answer 1

Instead of

<div ng-message="required">

you should have

<div ng-message="compareTo">

Since the name of your validator is compareTo.