title: Undo Redo In Angular JS
body: <p>I have a big object lined in $rootScope (say > 100 objects and each having hierarchy of objects/array again), I want to $watch entire $rootScope with deepWatching(i.e. turning 3rd parameter of $watch to TRUE). </p>
  
  <p>But the problem here is, $watch returns 2 objects (i.e. one Old RootScope and Modified RootScope). Then I have to do a process of checking what attribute of object changed in $rootScope and its hierarchy to PUSH it into stack. </p>
  
  <p>Do we have an easy way out to get the exact attribute changed while watching a $scope?</p>
  
  <pre><code>$scope.$watch($rootScope, function(oldObj, newObj){
  
     //all I want here is exactly what attribute changed, NOT entire objects!
  
  }, true);
  </code></pre>
  
  <p>Alternatively, I could add watch on each attribute of the Object but it appears to be extremely expensive. </p>
  
  <p>What is the best way to achieve undo/redo in angular js? </p>
  
  <p><strong>Note</strong> :- </p>
  
  <ol>
  <li><p>angular-history doesnt suit my need because I want to watch all attributes of object, which may also contain other objects and array. </p></li>
  <li><p>I'm certain watching entire $rootScope is not a good idea either, but I have aimed to build an UI which has several grids, drag n drop, might contain form, elements can be deleted. So I want to build an overall solution to stack the changes and undo it on CTRL + Z. Imagine replicating desktop version of Photoshop.</p></li>
  </ol>