title: Hide a form after validation in AngularJs
body: <p>I am working on a angular form and this is my first experience with Angular Form. I am able to submit the form successfully. But I want to do 2 more things:</p>
  
  <ol>
  <li>Validate the form.</li>
  <li>Hide the form if valid and show a <code>div</code> with confirmation.</li>
  </ol>
  
  <p>Right now am able to hide the form using ng-click &amp; ng-hide properties of the form. But I want this hiding to happen based on the validation. I am looking to validate email, by min &amp; max length &amp; required.</p>
  
  <p><strong>The form code:</strong></p>
  
  <pre><code>&lt;form id="signup-form" ng-submit="processForm()" ng-hide="showConfirm" &gt;
      &lt;div class="col-md-12"&gt;&lt;h4 class="col-md-12" &gt;What do you think?&lt;/h4&gt;&lt;/div&gt;
      &lt;div class="form-group col-md-12"&gt;
      &lt;div class="row"&gt;
          &lt;div class="radio col-md-6"&gt;
              &lt;label&gt;
                 &lt;input type="checkbox" ng-model="formData.option1"  &gt;
                 Option1
              &lt;/label&gt;
          &lt;/div&gt;
  
          &lt;div class="radio col-md-6"&gt;
              &lt;label&gt;
                  &lt;input type="checkbox" ng-model="formData.option2" &gt;
                  Option2
              &lt;/label&gt;
          &lt;/div&gt;
        &lt;/div&gt;    
      &lt;/div&gt;
  &lt;div class="col-md-12 contact"&gt;
      &lt;h4 class="col-md-12" &gt;Want us to contact you?&lt;/h4&gt;
      &lt;div class="form-group"&gt;
          &lt;div class="textbox col-md-12"&gt;
              &lt;label&gt;Name &lt;/label&gt;
                 &lt;input type="text" ng-model="formData.name" &gt;
  
          &lt;/div&gt;
          &lt;div class="textbox col-md-12"&gt;
              &lt;label&gt;Email &lt;/label&gt;
                 &lt;input type="text" ng-model="formData.email" &gt;
  
          &lt;/div&gt;
           &lt;div class="textbox col-md-12"&gt;
              &lt;label&gt;Phone &lt;/label&gt;
                 &lt;input type="text" ng-model="formData.phone" &gt;
  
          &lt;/div&gt;
      &lt;/div&gt;    
      &lt;/div&gt;
      &lt;div class="form-group row"&gt;
      &lt;div class="col-md-12 "&gt;
           &lt;div class="col-md-12 contact"&gt;
              &lt;button type="submit" class="btn btn-primary" ng-click="showConfirm = ! showConfirm"&gt;Submit&lt;/button&gt;
           &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;  
  &lt;div class="col-md-12 confirmation" ng-show="showConfirm"&gt;
      &lt;h2 &gt;Thanks alot for your feedback.&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>The js code:</strong></p>
  
  <pre><code>$scope.processForm = function() {                            
     $http.post('http://localhost/api/node.json', $scope.formData)
         .success(function(data) {            
             $scope.formData = {};                
             $state.go('main.start');      
         });          
  };
  </code></pre>