AngularJS directive with Complexify - angularjs

Question

I need help to create a AngularJS directive with Complexify. It's a password meter. I needed this:
<input type="password" ng-model="password" />
<password-meter value="password" complexity="complexity"></passwordMeter>
<span class="label label-important" ng-show="complexity > 60">STRONG</span>
In my example, when password complexity is high, my <span> is display.
My code:
app.directive('passwordMeter', function() {
return {
restrict: 'E',
link: function link(scope, element, attrs) {
var minLengthPassword = 6;
var strengthScaleFactor = 1;
$(element).complexify({
minimumChars: minLengthPassword,
strengthScaleFactor: strengthScaleFactor
}, function(valid, complexity) {
if(valid) {
scope.complexity = complexity;
} else {
scope.complexity = 0;
}
});
scope.$watch('password', function() {
if(!scope.password) {
scope.complexity = 0;
}
});
}
};
});

Answer 1

Your code has some errors you need to fix:
If you define a directive name which is camel-case (passwordMeter) it maps to password-meter in your templates
To use the directive as an element like you do you need to set restrict: 'E' and not 'A'
jquery-complexify works on inputs so you need to include the input you define outside the password-meter directive inside your directive and reference it.
I've created a working plunker for you http://plnkr.co/edit/PdK8U7q3GzWVVUX5alrS?p=preview