title: watching for changes in ngModel.$invalid in angular directive
body: <p>I have a directive which replaces a <code>select</code> element with a custom input control.   Here's a simplified version of it:</p>
  
  <pre><code>angular.module('MyModule', []).directive('reflector', function($timeout) {
      return {
          require: 'ngModel',
          link: function(scope, element, attrs, ngModel) {
              element.insertAfter('&lt;input type=text id="new-' + attrs.id + '" /&gt;');
              element.hide()
          }
      };
  
  });
  </code></pre>
  
  <p>I'd like this custom input control to reflect the valid/invalid state of the original select element, i.e. add the ng-invalid class when the base element is invalid. </p>
  
  <p>Is there any way to watch for changes to <code>ngModel.$invalid</code>?   I know I can do <code>scope.$watch(attrs.ngModel, ...)</code>, but that gives me the model data, not the form element's valid/invalid state..</p>