angularjs - error message with AsyncValidator is not visible -

the required directive shows red error message works! uniqueschoolclassnumbervalidator directive shows not red error message!

from server return exists => true, tried false.

what wrong? custom directive triggered sure!

directive

 'use strict'; angular.module('tgb').directive('uniqueschoolclassnumbervalidator', function (schoolclasscodeservice) {     return {         restrict: 'a',         require: 'ngmodel',         link: function (scope, element, attrs, ngmodel) {             ngmodel.$asyncvalidators.unique = function (schoolclass) {                 var schoolclassnumber = "0a";                 var schoolyearid = 1;                 return schoolclasscodeservice.exists(schoolyearid, schoolclassnumber);             };         }     }; }); 

service

this.exists = function (schoolyearid, schoolclassnumber) {        var path = 'api/schoolyears/' + schoolyearid + '/schoolclasses/' + schoolclassnumber;       return $http.get(path).then(function (response) {           if (response.data == true) {               $q.reject("schoolclass number has been taken");           }           else {               return $q.resolve();           }       });   }; 

html

<form name="myform">     <div class="col-sm-8">         <input type="text" unique-schoolclasnumber-validator name="myinput"                 ng-model-options="{ updateon: 'default blur', debounce: {'default': 300, 'blur': 0} }"                ng-model="schoolclassnumber" class="form-control"                 required placeholder="enter schoolclass">     </div>     <div ng-messages="myform.myinput.$error" style="color:red" role="alert">         <div ng-message="required">you did not enter anything.</div>         <div ng-message="unique">that schoolclass number exists.</div>     </div> </form> 

in service's exists method there should return keyword before $q.reject:

if (response.data == true) {      return $q.reject("schoolclass number has been taken"); } else {      return $q.resolve(); } 

directive should named uniqueschoolclassnumbervalidator instead of uniqueschoolclassnumbervalidator (angularjs change dash-delimited format camelcase).

there misspell in html code, in word "class". should unique-schoolclassnumber-validator instead of unique-schoolclasnumber-validator.