AngularJS - Reset the state of a bound object - angularjs

Question

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.
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?
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?
(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();
};
}]
});
};
})
})();
<div ng-controller="formController">
<p ng-repeat="displayBook in books">
{{displayBook.Name}}
</p>
<script type="text/ng-template" id="SomeModal.html">
<form name="editForm" ng-submit="saveModal(editBook)" noValidate>
<div class="modal-header">
Name: <input ng-model="editBook.Name" required /><br />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" ng-click="cancelModal()">Cancel</button>
<button class="btn btn-info" ng-disabled="editForm.$dirty && editForm.$invalid">Save</button>
</div>
</form>
</script>
</div>

Answer 1

You can create a deep copy of your object to a temp, and then set it back if neccessary:
var temp = angular.copy(currentBook);
$scope.editBook = currentBook;
$scope.saveModal = function (book) {
$modalInstance.close();
};
$scope.cancelModal = function () {
// Restore the previous state here!
angular.copy(temp, $scope.editBook);
$modalInstance.close();
};

Answer 2

Angular has method copy that makes job for you by cloning object or array.
The idea is to pass copy of your data to modal and not instance itself. So when user press Cancel the main instance doesn't change.
In your case instead:
$scope.editBook = currentBook;
write:
$scope.editBook = angular.copy(currentBook);

Answer 3

Consider caching a copy of the original model before displaying the modal, and then resetting it if the user cancels. This can easily be done directly in JavaScript, or you can opt to use Angular's $cacheFactory for more complex scenarios.
For instance, you can add an index to your ng-repeat:
<p ng-repeat="displayBook in books track by $index">
<a href="#" ng-click="openModal(displayBook, $index)">
{{displayBook.Name}}
</a>
</p>
And then alter your controller method to reset the $scope.books collection if the user cancels the modal:
$scope.openModal = function (currentBook, idx) {
// Cache the book, so that we can reset it later.
var cachedBook = angular.copy(currentBook);
var $outerScope = $scope;
var modalInstance = $modal.open({
// ...
controller: [
'$scope', '$modalInstance', function($scope, $modalInstance){
$scope.editBook = currentBook;
$scope.saveModal = function (book) {
// ...
};
$scope.cancelModal = function () {
// Restore the previous state
$outerScope.books[idx] = cachedBook;
// ...
};
}]
});
};
If you expect your users to be hitting Cancel more often than they actually save the edits, then perhaps consider reversing the operations and passing in a copy of the book instead of the original, only modify the original after saveModal is called.