AngularJS watching attribute changes

Question

I have built a directive named errorMarker for showing error messages on input control. The problem I am facing is that, first time attribute changes are getting detected and next time it doesn't detect. I have created a fiddle where you will see a text field and a button. Directive is applied on the text field.

 <input type="text" ng-model="name" error-marker error-message="{{error}}" size="20">

Also there is a button on click of which the model value is checked and error property on scope is set. Once the error is set the textfield border become red. Now if you remove the model value and click the button, border doesn't become red. The reason is attribute change is not getting detected. I am wondering why the change is not getting detected because I am also setting the attribute value to blank from the directive.

Fiddle : http://jsfiddle.net/FvLQN/1245/

Answer 1

You are setting error variable to " Invalid Name " everytime, so the value doesn't change and your function is not triggered.

Try this:

$scope.error= "Invalid Name " + $scope.name;