title: How to invalidate a form when using directive in AngularJS
body: <p>i am working on a SPA and a form inside this app uses an input masked text box implemented using a third party library from <a href="https://github.com/igorescobar/jQuery-Mask-Plugin" rel="nofollow">here</a></p>
  
  <p>i created a directive to set a mask for an IP address</p>
  
  <pre><code>angular
  .module('app').directive('ipMask', [
      function () {
          return {
              restrict: 'A',
              require: '?ngModel',
              link: function (scope, element, attrs, ngModel) {        
                      element.mask('0ZZ.0ZZ.0ZZ.0ZZ', {translation: {'Z': {pattern: /[0-9]/, optional: true}}});
                      element.mask('099.099.099.099');
  
                      scope.$watch(attrs.ngModel, function (newValue, oldValue) {
                          //????????
                      });
              }
          };
      }
  ]);
  </code></pre>
  
  <p>where my form code looks like </p>
  
  <pre><code>    &lt;div ng-controller="nodesListCtrl as vm"&gt;
          &lt;form role="form" name="frmNode"&gt;
  
              &lt;div class="form-group"&gt;
                  &lt;label&gt;Node IP :&lt;/label&gt;
                  &lt;input type="text" data-ip-mask ng-model="vm.myIp" name="CtrIp" class="input-sm form-control" placeholder="..." &gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>i want to invalidate the form if the IP address is wrong. i.e. i am expecting <strong>.ng-invalid</strong> class both on the form and and the control as well until the time it remains invalid. any suggestions ? </p>