title: Angular1: How to reflect ng-model errors on another element?
body: <p>I have a directive with the following template</p>
  
  <pre><code>&lt;div&gt;
      &lt;span class="label"&gt;My Label&lt;/span&gt;
      &lt;input ng-model="name" required&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want the label to be painted red when the input field is invalid. </p>
  
  <p>How can I do that? </p>
  
  <p>Currently I have another directive to sync all the errors from ngModelCtrl to the wrapping div</p>
  
  <pre><code> &lt;div add-all-errors&gt;
     ... 
   &lt;/div&gt;
  </code></pre>
  
  <p>And the directive's link function does something like this: </p>
  
  <pre><code>const ngmodel = $element.find('[ng-model]').controller('ngModel');
  $scope.$watch(()=&gt;ngmodel.$error, addAllClasses, true); 
  </code></pre>
  
  <p>Where <code>addAllClasses</code> simply makes sure the correct classes appear on the element.. </p>
  
  <p>I also tried just adding the same ng-model </p>
  
  <pre><code>  &lt;div ng-model="name"&gt;
    ...
    &lt;/div&gt;
  </code></pre>
  
  <p>But did not see the classes there.. </p>
  
  <p>any better way to do this? </p>