angular directive - AngularJS : Why is my field invalid? -

i have custom validation password

app.directive('userpassword', function() {     return {         restrict: 'a',         require: 'ngmodel',         link: function(scope, elm, attrs, ctrl) {             ctrl.$validators.myvalidator = function(modelvalue, viewvalue) {                 var msg = helper.validation.user.localpassword(modelvalue)                 ctrl.$error.message = msg                 ctrl.required = helper.validation.user.localpassword()                 return ! msg             }         }     } }) 

this password html:

<div class="my-form-group">     <label for="signup_password">password:</label>     <input ng-model="password" type="password" name="password" id="signup_password"          placeholder="enter password"         user-password ng-required="signupform.password.required" class="my-form-control"> </div> 

when enter abcd, returned value of directive link function true. when inspect element, got this:

class="my-form-control ng-invalid ng-dirty ng-valid-parse ng-valid-required ng-valid-my-validator ng-touched"  

as can see, both required , my-validator valid (ng-valid-required , ng-valid-my-validator. why class still ng-invalid?

when inspect entire form, ng-valid

update. if use scope instead of ctrl, it's working.

ctrl.$validators.myvalidator = function(modelvalue, viewvalue) {     var msg = helper.validation.user.localusername(modelvalue)      scope.userusername = {}     scope.userusername.message = msg     scope.userusername.required = helper.validation.user.localusername()     return ! msg }; 

and in html

<input ng-model="username" type="text" name="username" id="signin_username"         placeholder="enter username"        user-username ng-required="userusername.required" class="my-form-control">  <div ng-show="signinform.username.$touched && userusername.message">     {{userusername.message}} </div> 

but dont want pollute controller scope. how can use ctrl instead of scope

edit: can add following style header. input field red.

http://plnkr.co/edit/deaqoiw4kfekih3zot1j?p=preview

<style>      input.ng-invalid.ng-touched {       background-color: #fa787e;     }      input.ng-valid.ng-touched {       background-color: #78fa89;     }      input.ng-pending.ng-touched {       background-color: #b3933b;     } </style> 

this implementation username field. password should pretty same.

                var def = $q.defer()                 ctrl.message = 'checking server username unique'                 restservice.checkisusernameunique(modelvalue, function() {                     ctrl.message = 'ok unique username'                     def.resolve()                 }, function(err) {                     ctrl.message = err.message                     def.reject()                 })                 return def.promise; 

and in html

            <div ng-show="form.username.$touched && form.username.message">                 {{form.username.message}}             </div> 

in short, not put message inside ctrl.$error if want put non-error message well