title: AngularJS - Reset the state of a bound object
body: <p>I've made a really simple repeat of some books, when the user clicks the book, it opens a new modal. Where they can edit the book. As i'm using the two way binding, the 'display page' automatically changes as i type on the modal - which is brilliant. </p>
  
  <p>However what i want to do is allow the user to press a cancel button, and the state of the book goes back to what it was before it was altered. Is this possible in Angular without going back and resetting the entire $scope.books object? </p>
  
  <p>In the real application this would be an API call, and i'd rather not make another server call unless entirely necessary of course. Is there a pattern that takes care of this already?</p>
  
  <pre><code>(function(){
      var app = angular.module('ngModalDemo', ['ui.bootstrap']) 
      .controller('formController', function($scope, $modal, $log){
  
          $scope.books = [
              { Id: 1, Name:'A Feast For Crows'},
              { Id: 2, Name:'Before they are Hanged'}
          ];
  
          $scope.openModal = function (currentBook) {             
              var modalInstance = $modal.open({
                  templateUrl: 'SomeModal.html',
                  controller: [
                      '$scope', '$modalInstance', function($scope, $modalInstance){
                          $scope.editBook = currentBook;
                          $scope.saveModal = function (book) {
                              $modalInstance.close();
                          };
                          $scope.cancelModal = function () {
                              //  Restore the previous state here!
                              $modalInstance.close();
                          };
                      }]
              });
          };
      })
  })();
  
  &lt;div ng-controller="formController"&gt;
  
      &lt;p ng-repeat="displayBook in books"&gt;
           &lt;a href="#" ng-click="openModal(displayBook)"&gt;{{displayBook.Name}}&lt;/a&gt;
      &lt;/p&gt;    
  
      &lt;script type="text/ng-template" id="SomeModal.html"&gt;
          &lt;form name="editForm" ng-submit="saveModal(editBook)" noValidate&gt;
              &lt;div class="modal-header"&gt;
                  Name: &lt;input ng-model="editBook.Name" required /&gt;&lt;br /&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-warning" ng-click="cancelModal()"&gt;Cancel&lt;/button&gt;
                  &lt;button class="btn btn-info" ng-disabled="editForm.$dirty &amp;&amp; editForm.$invalid"&gt;Save&lt;/button&gt;
              &lt;/div&gt;
          &lt;/form&gt; 
      &lt;/script&gt;
  &lt;/div&gt;
  </code></pre>