title: AngularJS - ng-model not updating correctly
body: <p>I have this piece of HTML:</p>
  
  <pre><code>:
  :
  &lt;td ng-if="Curr_State == 'Edit' &amp;&amp; This_Page.Data_Changed == false" style="max-width:300px"&gt;
      &lt;button type="button"
              class="FD" 
              ng-click="Initiate_Append_to_JobCard()" 
              style="height:80px;width:180px;white-space:normal;background:green;padding:10px"&gt;
          &lt;font size="3" class="ng-binding"&gt;Append{{All_Labels.Common.Append}}
          &lt;/font&gt;
          &lt;font size="2"&gt;
              {{This_Page.Append_Get_Number}}
              &lt;table id="Get_Append_Count_an_Execute" ng-if="This_Page.Append_Get_Number == 'Y'"&gt;
                  &lt;tbody&gt;
                      &lt;tr&gt;
                          &lt;td&gt;
                              &lt;label for="Append_Number"&gt; #:&lt;/label&gt;
                          &lt;/td&gt;
                          &lt;td&gt;
                              &lt;input string-to-number
                                     id="Append_Number"
                                     type="number" 
                                     class="form-control" 
                                     ng-model="This_Page.Append_Number"
                                     min="0"
                                     step="1"
                                     style="width:70px;margin:0px"&gt;
                          &lt;/td&gt;
                          &lt;td&gt;
                              &lt;button class="btn btn-success" 
                                      ng-click="Do_Append()" 
                                      title="Proceed with Append"
                                      type="button"&gt;
                                  &lt;font size="2" color="white"&gt;
                                      &lt;span class="glyphicon glyphicon-ok" aria-hidden="true"&gt;&lt;/span&gt;
                                  &lt;/font&gt;
                           &lt;/button&gt;
  
                          &lt;/td&gt;
                          &lt;td&gt;
                              &lt;button class="btn btn-danger" 
                                      ng-click="Cancel_Append()" 
                                      title="Cancel Append request"
                                      type="button"&gt;
                                  &lt;font size="2" color="white"&gt;
                                      &lt;span class="glyphicon glyphicon-remove" aria-hidden="true"&gt;&lt;/span&gt;
                                  &lt;/font&gt;
                           &lt;/button&gt;
  
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/font&gt;
      &lt;/button&gt;
  &lt;/td&gt;
  :
  :
  </code></pre>
  
  <p>and the following two functions within the controller:</p>
  
  <pre><code>$scope.Initiate_Append_to_JobCard = function() {
      $scope.This_Page.Append_Get_Number = "Y" ;
  }
  
  //////////////////////////////////////////////////////////////////
  
  $scope.Cancel_Append = function() {
      $scope.This_Page.Append_Get_Number = "N"   ;
      $scope.This_Page.Append_Number     = null  ;
  }
  </code></pre>
  
  <p>When the outer button is clicked, <code>$scope.This_Page.Append_Get_Number</code> is set to <code>"Y"</code> and the inner objects are properly shown.</p>
  
  <p>When the Cancel button is clicked, the function <code>$scope.Cancel_Append</code> is invoked, the value of <code>$scope.This_Page.Append_Get_Number</code> is set to <code>"N"</code> (first statement of the function) but this change is not propagated towards the HTML. In fact, I added <code>{{This_Page.Append_Get_Number}}</code> which shows initially <code>N</code>, then <code>Y</code> and it then remains unchanged no matter how many times I click on the cancel button.</p>