angularjs - Isolated scope issue -

i have no expertise when working isolated scopes on angular found project using check strength of username angular directive.

this directive:

function usernamestrength() {   return {     require: 'ngmodel',     restrict: 'e',     scope: {       username: '=ngmodel'     },      link: function(scope, elem, attrs, ctrl) {        /** watch password fields **/       scope.$watch('username', function(newval) {         scope.strength = issatisfied(newval && newval.length >= 8) +           issatisfied(newval && /[a-z]/.test(newval)) +           issatisfied(newval && /(?=.*\w)/.test(newval)) +           issatisfied(newval && /\d/.test(newval));          function issatisfied(criteria) {            return criteria ? 1 : 0;          }       }, true);   } } 

then on html (jade) had input , directive on whom strength progress bar displayed , manipulated.

input.form-control(autocomplete="off", type='text', required='', ng-model="register.username") 

label strength username-strength(ng-model="register.username")

till here works fine, if add object on controller store data form (which wizard) , set input ng-model ng-model="register.data.username" (same thing on username-strength directive) being data in controller object

vm.data  = {}; 

the $watches in directive no longer have access input.

with code, putting username-strength on label while directive triggered element name 'user-strength'. wrong way, $watch not work.

1. the ngmodel binds input,select, textarea, not label.
2. you have modify restrict 'a' instead of 'e', , put input[text]

fixed

you trying track status of text field username , print strength of text on label. can study on sample. (source)