title: AngularJS directive watch validity
body: <p>I try to create a directive which should peform some actions when an input field is marked as invalid. For this example lets assume I have a directive which checks if the input is a prime number, and I want to create a directive which adds a class to the element when it's invalid: </p>
  
  <pre><code>&lt;input type="text" ng-model="primeNumber" validate-prime invalid-add-class="error"&gt;
  </code></pre>
  
  <p>The validate-prime uses the parsers and formatters on ng-model to update the validity of the model. </p>
  
  <p>Now I want the invalid-add-class directive to add the class "error" when the model is invalid, and to remove it when it is valid. In other words, it should watch the $valid (or $invalid) property of the model controller. However, I can't figure out how to get this working. I tried: </p>
  
  <pre><code>link : function(scope, element, attrs, ctrl) {
      ctrl.$watch("$valid", function(newVal, oldVal) {
      //never fired
      });
  }
  </code></pre>
  
  <p>Perhaps I could watch some variable on scope, but I don't know which variable to watch for. </p>
  
  <p>So how can I be notified when the validity of a model changes?</p>