title: AngularJS: Data-bound modal - save changes only when "Save" is clicked, or forget changes if "Cancel" is clicked
body: <p>I have a list of items, and upon clicking on one of the items, a modal dialog is displayed for the user to make some changes and click either "Close" or "Save changes".</p>
  
  <p>The problem is that say that user makes some changes and clicks on "Close", the changes would have been reflected in the model the view is bound to, since data-binding is instant.</p>
  
  <p>My question is then, how do I either defer the updates and only perform binding when "Save Changes" is clicked, or somehow forget the changes if "Cancel" is clicked.</p>
  
  <p>The code for my modal dialog is like so:</p>
  
  <pre><code>&lt;div ui-modal class="fade static" ng-model="modalShown" id="myModal" data-backdrop="static"&gt;
          &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" ng-click="closeModal()" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
              &lt;h3&gt;{{selectedClientFeature.feature.type}}&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;    
              &lt;ul class="unstyled columnlist"&gt;
                  &lt;li ng-repeat="country in countriesForEdit"&gt;
                      &lt;input type="checkbox" ng-model="country.selected"&gt; {{country.name}}
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;a ng-click="closeModal()" class="btn"&gt;Close&lt;/a&gt;
              &lt;a ng-click="saveChanges()" class="btn btn-primary"&gt;Save changes&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Thanks,
  Shaun</p>