title: Angular Form issue
body: <p>I have a form which contains two div which should be displayed as per form submission value but as soon as I put in that logic, I am loosing the binded angular ng-model variables and it is getting refreshed. How can I resolve that? Below is the html page</p>
  
  <pre><code>&lt;body ng-app="myApp"&gt;
  
      &lt;div class="container full-body" ng-controller="myCtrl" &gt;
  
              &lt;div class="row header-page"&gt;
  
                      &lt;div class="col-md-4 happy-face-header" &gt;&lt;img src="img/mad-lib-happy-face-2.png"/&gt;&lt;/div&gt;
                      &lt;div class="col-md-6  happy-face-logo"&gt;
                          &lt;img src="img/ng-mad-libs-logo-2.png"/&gt;
                          &lt;h2 style="text-align:center"&gt;Automate This!&lt;/h2&gt;
                      &lt;/div&gt;
  
              &lt;/div&gt;
  
              &lt;form name="madlibform" novalidate ng-submit="submit()"&gt;
                  &lt;div class="madlibwordschoose"  ng-if="!madlibform.$submitted"&gt;
                  &lt;div class="row wordstochoose"&gt;
                              &lt;div class="col-md-12"&gt;
                                  &lt;h1 style="text-align: left; margin-left: -10px;"&gt;Provide the following words&lt;/h1&gt;
                              &lt;/div&gt;
  
                              &lt;div class="'col-md-12"&gt;
                                  Choose a gender for this madlib game
                                  &lt;select name="gender" ng-model="gender"&gt;
                                      &lt;option value="male"&gt;Male&lt;/option&gt;
                                      &lt;option value="female"&gt;Female&lt;/option&gt;
                                  &lt;/select&gt;
                              &lt;/div&gt;
  
                              &lt;input type="text" name="female_name" class="col-md-3 words-block" placeholder='female/male name' ng-model="female_name"  required ng-minlength="2"/&gt; &lt;div class="col-md-1"&gt;&lt;span class="error" ng-if="madlibform.$submitted &amp;&amp; madlibform.female_name.$error.required"&gt;
      A name is required!
  &lt;/span&gt;&lt;/div&gt;
                              &lt;input type="text" name="dirty_task" class="col-md-3 words-block" placeholder="Dirty task" ng-model="dirty_task"/&gt;&lt;div class="col-md-1"&gt;&lt;/div&gt;
                              &lt;input type="text" name="obnoxious_celebrity" class="col-md-3 words-block" placeholder="Obnoxious celebrity" ng-model="obnoxious_celebrity"/&gt;&lt;div class="col-md-1"&gt;&lt;/div&gt;
  
                      &lt;/div&gt;
                  &lt;div class="row wordstochoose"&gt;
                              &lt;input type="text" name="job_title" class="col-md-3 words-block" placeholder="Job title" ng-model="job_title"/&gt;&lt;div class="col-md-1"&gt;&lt;/div&gt;
                              &lt;input type="text" name="celebrity" class="col-md-3 words-block" placeholder="Celebrity" ng-model="celebrity"/&gt;&lt;div class="col-md-1"&gt;&lt;/div&gt;
                              &lt;input type="text" name="huge_number" class="col-md-3 words-block" placeholder="Huge number" ng-model="huge_number"/&gt;&lt;div class="col-md-1"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;div class="row wordstochoose"&gt;
                              &lt;input type="text" name="tedious_task" class="col-md-3 words-block" placeholder="Tedious task" ng-model="tedious_task"/&gt;&lt;div class="col-md-1"&gt;&lt;/div&gt;
                              &lt;input type="text" name="useless_skill" class="col-md-3 words-block" placeholder="Useless skill" ng-model="useless_skill"/&gt;&lt;div class="col-md-1"&gt;&lt;/div&gt;
                              &lt;input type="text" name="adjective" class="col-md-3 words-block" placeholder="Adjective" ng-model="adjective"/&gt;&lt;div class="col-md-1"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;input style="text-align: right" type="submit"  value="Generate My Madlib" /&gt;
                  &lt;/div&gt;
  
                  &lt;div ng-show="madlibform.$submitted"&gt;
                  &lt;div  class="row fillthewords"&gt;
                          &lt;p&gt;&lt;a ng-show="female_name === undefined || female_name ===''"&gt;[female/male name]&lt;/a&gt;{{female_name}} was a &lt;a ng-show="job_title === undefined || job_title ===''"&gt;[job title]&lt;/a&gt;{{job_title}} who loved technology. Although &lt;a ng-show="gender==='male'"&gt;he&lt;/a&gt;&lt;a ng-show="gender==='female'"&gt;she&lt;/a&gt;  loved parts of &lt;a ng-show="gender==='male'"&gt;his&lt;/a&gt;&lt;a ng-show="gender==='female'"&gt;her&lt;/a&gt; job, &lt;a ng-show="gender==='male'"&gt;he&lt;/a&gt;&lt;a ng-show="gender==='female'"&gt;she&lt;/a&gt; absolutely hated&lt;a ng-show="tedious_task === undefined || tedious_task ===''"&gt;[tedious task]&lt;/a&gt;  {{tedious_task}} and &lt;a ng-show="dirty_task === undefined || dirty_task ===''"&gt;[dirty task]&lt;/a&gt;{{dirty_task}}.
                              So,&lt;a ng-show="female_name === undefined || female_name ===''"&gt;[female name]&lt;/a&gt; {{female_name}} met with &lt;span ng-show="gender==='male'"&gt;his&lt;/span&gt;&lt;a ng-show="gender==='female'"&gt;her&lt;/a&gt; life mentor &lt;a ng-show="celebrity === undefined || celebrity ===''"&gt;[Celebrity]&lt;/a&gt;{{celebrity}} who told &lt;a ng-show="gender==='male'"&gt;his&lt;/a&gt;&lt;a ng-show="gender==='female'"&gt;her&lt;/a&gt; to learn how to &lt;a ng-show="useless_skill === undefined || useless_skill ===''"&gt;[useless skill]&lt;/a&gt;{{useless_skill}} with Thinkful. Thinkful didn't offer a course on &lt;a ng-show="useless_skill === undefined || useless_skill ===''"&gt;[useless skill]&lt;/a&gt;{{useless_skill}} so &lt;a ng-show="gender==='male'"&gt;he&lt;/a&gt;&lt;a ng-show="gender==='female'"&gt;she&lt;/a&gt; studied programming instead.
                              What a great decision! With &lt;a ng-show="gender==='male'"&gt;his&lt;/a&gt;&lt;a ng-show="gender==='female'"&gt;her&lt;/a&gt; new skills, &lt;a ng-show="female_name === undefined || female_name ===''"&gt;[female/male name]&lt;/a&gt;{{female_name}} built a(n) &lt;a ng-show="adjective === undefined || adjective ===''"&gt;[adjective]&lt;/a&gt;{{adjective}} robot named &lt;a ng-show="obnoxious_celebrity === undefined || obnoxious_celebrity ===''"&gt;[obnoxious celebrity]&lt;/a&gt;{{obnoxious_celebrity}} that not only loved &lt;a ng-show="dirty_task === undefined || dirty_task ===''"&gt;[dirty task]&lt;/a&gt;{{dirty_task}} but did it &lt;a ng-show="huge_number === undefined || huge_number ===''"&gt;[huge number]&lt;/a&gt;{{huge_number}} faster. &lt;/p&gt;
                  &lt;/div&gt;
                  &lt;input type="button" value="Start Over" ng-click="resetfunc()"/&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
  
      &lt;/div&gt;
      &lt;script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="bower_components/angular/angular.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="bower_components/angular-messages/angular-messages.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/script.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>Below is the script for controller in angular</p>
  
  <pre><code>angular.module('myApp',['ngMessages'])
  .controller('myCtrl',['$scope', function($scope){
  
      $scope.gender='female';
      $scope.reset=true;
  
  
      $scope.submit=function()
      {
        console.log($scope.female_name);
        $scope.madlibform.$submitted=true;
        $scope.reset=false;
        console.log($scope.female_name);
  
      };
      $scope.resetfunc=function(){
         $scope.madlibform.$submitted=false;
         $scope.reset=true;
     };
  
  
  }]);
  </code></pre>