title: angular nested form validation setPristine on subForm -> setPristine on parentForm
body: <p>I have a parent form containing multiple sub forms (e.g. <a href="http://jsfiddle.net/riemersebastian/9zr00ear/3/" rel="nofollow">http://jsfiddle.net/riemersebastian/9zr00ear/3/</a>)</p>
  
  <p>When the user changes any of the fields, the respective sub form and the parent form get the class ng-dirty to indicate something has changed.</p>
  
  <p>I have also a save-button (actually it is a link) on each of the sub form which saves all sub-form changes and calls subform.$setPristine to update the state of the subform.</p>
  
  <p>However, I would like the parent form to also take notice when there are no dirty subforms anymore and thus remove its' ng-dirty class.</p>
  
  <p>I have come up with this solution: <a href="http://jsfiddle.net/riemersebastian/9zr00ear/3/" rel="nofollow">http://jsfiddle.net/riemersebastian/9zr00ear/3/</a></p>
  
  <p>As you can see I manually check in the controller using jQuery if there are any subforms left marked as dirty, and if not I set the parent form pristine. For that I need to delay the jQuery using $timeout otherwise the call of $setPristine might not have yet changed the DOM and thus the parent form would not be updated.</p>
  
  <p>I would like to know, is there a better way of doing this?</p>
  
  <p>Here is the code:</p>
  
  <pre><code>var myApp = angular.module('myApp',[]);
  
  myApp.controller('FirstCtrl', ['$scope', '$timeout', function($scope, $timeout) {          
      $scope.setFormPristine = function(subForm) {
          console.log(subForm);
          subForm.$setPristine();    
  
          $timeout(function() {
          if (!($('body').find(".subForm").is(".ng-dirty"))) {
             console.log("none is dirty, set main form pristine")
             $scope.form.$setPristine();
          }
          }, 10);
      }    
  }]);
  
  angular.bootstrap(document, ['myApp']);
  </code></pre>
  
  <hr>
  
  <pre><code>&lt;body&gt;
      &lt;div ng-controller="FirstCtrl"&gt;            
          &lt;div&gt;
              (outer) form is dirty? &lt;b&gt;{{ form.$dirty }}       &lt;/b&gt;
          &lt;/div&gt;
          &lt;form name="form" ng-init="variants = [{duration:10, price:100}, {duration:30, price:200}]"&gt;
              &lt;div&gt;
                  &lt;div class="subForm" ng-repeat="variant in variants" ng-form="subForm"&gt;
                   &lt;div&gt;
                      &lt;label&gt;Duration:&lt;/label&gt;                    
                      &lt;input name="duration" ng-model="variant.duration"/&gt;                    
                   &lt;/div&gt;                  
                   &lt;div&gt;
                      &lt;label&gt;Price:&lt;/label&gt;
                      &lt;input name="price" ng-model="variant.price"/&gt;                  
                  &lt;/div&gt;
                   &lt;a href="" ng-click="setFormPristine(subForm)"&gt;Reset Form to pristine&lt;/a&gt;
                   &lt;div&gt;
                      (inner) subform is dirty? &lt;b&gt;{{ subForm.$dirty }}           &lt;/b&gt;
                   &lt;/div&gt;
                    &lt;br&gt;&lt;/br&gt;
                  &lt;/div&gt;
              &lt;/div&gt;            
          &lt;/form&gt;        
      &lt;/div&gt;        
  &lt;/body&gt;
  </code></pre>