Using AngularJS "copy()" to avoid reference issues

Question

I'm displaying a list of items, each of which has an "edit"-button next to it. A click on that opens an angular ui modal window and the user can change some properties of the specific item.

Now, what bugged me was that when typing in this edit-window, the specific item in the list of items reflected the changes immediatly. I only wanted it to update when the user clicked 'ok' in the modal, and to not change at all if the user chose 'cancel'.

My workaround uses copy to make a, well, copy of the chosen item that then serves as model for the view:

var modalInstance = $modal.open({
    templateUrl: 'scripts/app/views/editBond.html',
    controller: function ($scope, $modalInstance, bond) {
        $scope.bond = angular.copy(bond);
        $scope.ok = function () {
            $modalInstance.close($scope.bond);
        };
        $scope.cancel = function () {
            $modalInstance.dismiss('cancel');
        };
    },
    resolve: {
        bond: function () {
            return bond;
        }
    }
});

Is using angular.copy() appropriate to avoid such issues? Is this a scope issue at all?

Answer 1

Yep, using angular.copy() is absolutely appropriate here. If you want something more advanced you might want to checkout angular-history