title: Form validation on visible fields at that moment?
body: <p>I have a form as follows:</p>
  
  <pre><code>&lt;label class="col-md-2 control-label"&gt;
      &lt;input type="checkbox" id="HomeType" name="HomeType" ng-model="ModelData.HomeType"
          ng-checked="ModelData.HomeType == 'T'" /&gt;
      Show Home Type 1
  &lt;/label&gt;
  
  &lt;!--This is visible only if above checkbox is selected--&gt;                       
  &lt;div class="form-group" ng-if="ModelData.HomeType1"&gt;
      &lt;label for="HomeType1" class="col-md-3 control-label"&gt;
          Type of Home:
      &lt;/label&gt;
      &lt;div class="col-md-4" ng-class="{ 'has-error' : MyForm.HomeType1.$invalid &amp;&amp; submitted}"&gt;
          &lt;select id="HomeType1" name="HomeType1" class="form-control"
              ng-model="ModelData.HomeType1" ng-options="Home.HomeType as Home.HomeDescription for Home in HomeTypeTable"
              required&gt;
          &lt;/select&gt;
          &lt;span ng-show="MyForm.HomeType1.$invalid &amp;&amp; submitted" class="help-block"&gt;
              Please select the Type of Home 1.&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!--This is always visible on the screen--&gt;                     
  &lt;div class="form-group"&gt;
      &lt;label for="HomeType2" class="col-md-3 control-label"&gt;
          Type of Home 2:
      &lt;/label&gt;
      &lt;div class="col-md-4" ng-class="{ 'has-error' : MyForm.HomeType2.$invalid &amp;&amp; submitted}"&gt;
          &lt;select id="HomeType2" name="HomeType2" class="form-control"
              ng-model="ModelData.HomeType2" ng-options="Home.HomeType as Home.HomeDescription for Home in HomeTypeTable"
              required&gt;
          &lt;/select&gt;
          &lt;span ng-show="MyForm.HomeType2.$invalid &amp;&amp; submitted" class="help-block"&gt;
              Please select the Type of Home 2.&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So, Home Type 2 dropdown is always visible and Home Type 1 is visible only on selection of the checkbox.</p>
  
  <p>Now, on click of form submit button, I set the $scope.submitted variable to true and stops the submission as follows:</p>
  
  <pre><code>$scope.submitted = true;
  if($scope.MyForm.$invalid == true){
  return false;
  }        
  </code></pre>
  
  <p>So, this brings the red colored bolder to my Home Type 2 dropdown. Till this everything is fine. If I select any value to Home Type 2 dropdown, the red color is gone and I am able to submit the form also (as Home Type 1 is still hidden, so it is not validated).</p>
  
  <p>But the problem comes when I do as follows:</p>
  
  <ol>
  <li>Lets say my Home Type 2 is blank and Home Type 1 checkbox is not selected (so Home Type 1 is hidden) and I try to submit the form.</li>
  <li>This triggers submit and makes Home Type 2 red. And stops the submission.</li>
  <li>Then I selected the Home Type 1 checkbox, so it makes Home Type 1 visible on the screen. But this Home Type 1 is also in red color !! </li>
  <li>I want to validate this Home Type 1 dropdown only when form is submitted and this field was visible at that submission. If Home Type 1 was hidden at the time of submission, it should not be red when it is made visible if user selects checkbox after first submission attempt.</li>
  </ol>
  
  <p>Hopefully I was able to explain my situation.</p>