title: How to reset custom input directive and its parent form to $pristine
body: <p>I've implemented a custom input directive - <code>counter</code> with a reset capability. The directive has <code>require: "ngModel"</code>.</p>
  
  <p>I am resetting the pristine state of the directive's <code>ngModel</code> with <code>$setPristine()</code>. Unlike <code>$setDirty()</code>, <code>$setPristine()</code> does not touch the <code>$pristine</code> state of the parent form. </p>
  
  <p><strong>Q:</strong> How do I "notify" the parent form that this directive is no longer "dirty", such that the parent form could have its <code>$pristine</code> state reset? </p>
  
  <p>Bear in mind that just calling <code>form.$setPristine()</code> is not enough as there may be other "dirty" controls in the form, which my directive wouldn't (and shouldn't) know about.</p>
  
  <p>This is the directive's link function:</p>
  
  <pre><code>link: function(scope, element, attrs, ngModel){
  
    var original;
  
    ngModel.$render = function(){
      original = scope.counter = ngModel.$viewValue;
    };
  
    scope.up = function(){
      ngModel.$setViewValue(++scope.counter);
    };
  
    scope.reset = function(){
      scope.counter = original;
      ngModel.$setViewValue(scope.counter);
      ngModel.$setPristine(); // this sets $pristine on the directive, but not the form
    };
  }
  </code></pre>
  
  <p>And here's how it is used:</p>
  
  <pre><code>&lt;div ng-form="form"&gt;
    &lt;counter ng-model="count"&gt;&lt;/counter&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://plnkr.co/edit/PUKUOEtiOWxueD4dkmlG?p=preview" rel="nofollow">plunker</a></p>