Angular 1.5, cloning scope to keep track of changing

Question

I'm trying to set a dictionary of changes in order to track any modifcation to the scope when I execute the take snapshot function, however, for some reason, it starts working at the third try, other cases, my current value is sync with the previous, any idea why?

My saving factory looks like :

 .factory('AuthoringState', function() {
        var track = 0;
        var _pool = {};

        return  {
            addChange : function(data) {
                track++;
                var temp = _.cloneDeep(data);
                _pool[track] = temp;
                temp['track'] = track;
                return _pool[track];
            },
            undo : function(checklist) {
                    if(checklist['track'] === 1) {
                        return checklist;
                    }
                    return _pool[checklist['track'] - 1];
            },
            back : function(checklist) {
                    if(checklist['track'] === track) {
                        return checklist;
                    }
                    return _pool[checklist['track'] + 1];
            }
        }

})

and my controller like this:

 .controller('Sample', function($scope, AuthoringState) {


        var tasks = {
            tasks:[
                {value: 1, text: 'I\'m a task'},
                {value: 2, text: 'I\'m another task'}] 
        };

        var vm = this;

        /**Init**/
        vm.checklist = new CheckList(tasks);
        vm.checklist = AuthoringState.addChange(vm.checklist);  


        /** Methods**/

        $scope.snapshoot = function() {
            vm.checklist = AuthoringState.addChange(vm.checklist);
        }

        $scope.undo = function() {
            vm.checklist = AuthoringState.undo(vm.checklist);
        }

        $scope.back = function() {
            vm.checklist = AuthoringState.back(vm.checklist);
        }

        $scope.check = function() {
            console.log($scope.checklist);
        }
});

Here is a jsbin to see it working.

Answer 1

By returning the snapshot objects themselves from your service and binding them to the template, you are allowing the user's changes to modify the snapshots. It sounds like you want them to be immutable instead, so a snapshot doesn't change after it's saved.

Instead, clone the snapshots when you restore them and return the clones, leaving the snapshots untouchable:

undo : function(checklist) {
  if(checklist.track === 1) {
    return checklist;
  }
  return _.cloneDeep(_pool[checklist.track - 1]);
},
back : function(checklist) {
  if(checklist.track === track) {
    return checklist;
  }
  return _.cloneDeep(_pool[checklist.track + 1]);
}

Also, when saving a new snapshot, don't replace the current checklist object on the scope with the snapshot from the pool (which makes the snapshot itself editable), all you need to do is update its track property:

addChange : function(data) {
  track++;
  var temp = _.cloneDeep(data);
  _pool[track] = temp;
  temp.track = track;
  data.track = track;
},

And in the controller:

vm.checklist = new CheckList(tasks);
AuthoringState.addChange(vm.checklist);

$scope.snapshoot = function() {
    AuthoringState.addChange(vm.checklist);
}

Combining these changes, we get this working version: http://jsbin.com/juwimepofi/1/edit?js,output