title: Why do CSS transitions occur for unshift() and not for shift() in ng-repeat lists?
body: <p>I'm moving some elements in the page using <code>ng-repeat</code> and CSS transitions. If I change the data array using <code>unshift</code> the list transitions nicely. (In my application I'm transitioning position as well as opacity.) </p>
  
  <p>If, however, I use <code>shift</code> to update the array, the DOM is updated immediately with no transition. </p>
  
  <p><strong><a href="http://jsfiddle.net/isherwood/w123q5na/" rel="nofollow noreferrer">Here's a demo</a></strong> of one approach, where all works as expected aside from the transitions. Compare the behavior when using the two buttons.</p>
  
  <pre><code>$scope.items.push( $scope.items.shift() );
  </code></pre>
  
  <p><strong><a href="http://jsfiddle.net/isherwood/urr79ox0/" rel="nofollow noreferrer">Here's another demo</a></strong> of an alternative approach, where the transitions work, but the array loses an element each time the function runs. </p>
  
  <pre><code>$scope.items.shift( $scope.items.push() );
  </code></pre>
  
  <p>The idea is that the user can cycle through the items in the array indefinitely and the CSS transitions occur in both directions. What seems to be the issue is that AngularJS updates the DOM in one case, but not in the other, though I wasn't able to demonstrate that in my testing. </p>
  
  <p>Also, based on some reading I did I tried using <code>track by item.id</code> with no success. Thanks much.</p>