title: Ng-repeat not updating with array changes
body: <p>I have looked over this issue for many hours and read many other questions that seem entirely the same and I have tried every one of their solutions, but none seem to work.</p>
  
  <p>I have an array of objects (<code>instructionObj.instructions</code>) and those objects get repeated with <code>ng-repeat</code> and their template is a directive.</p>
  
  <pre><code>&lt;div instruction-directive ng-repeat="i in instructionsObj.instructions"&gt; &lt;/div&gt;
  </code></pre>
  
  <p>I then allow the items to be sorted using Jquery UI sortable.</p>
  
  <pre><code>var first, second;
  $( ".sort" ).sortable({
    axis: "y",
    start: function( event, ui ) {
        first = ui.item.index();
    },
    stop: function( event, ui ) {
        second = ui.item.index();
        console.log(first + " " + second);
        rearrange(first, second);
        $scope.$apply();
    }
  });
  </code></pre>
  
  <p>I then access the start and end index of the object being moved and rearrange the array accordingly:</p>
  
  <pre><code>function rearrange(f, s){
      $timeout(function () {
          $scope.instructionsObj.instructions.splice(s, 0,
              $scope.instructionsObj.instructions.splice(f, 1)[0]);
          $scope.$apply();
      });
  }
  </code></pre>
  
  <p>All of this works great most of the time. The one scenario I have found a failure is when rearranging the objects as such (one column is the current position of all objects displayed on the screen):</p>
  
  <p>a | b | c | d | a</p>
  
  <p>b | c | d | c | b</p>
  
  <p>c | d | b | b | d</p>
  
  <p>d | a | a | a | c</p>
  
  <p>The last step should be a, d, c, b. But it changes to a, b, d, c.</p>
  
  <p><a href="https://i.stack.imgur.com/UTJ88.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UTJ88.png" alt="wrong configuration"></a></p>
  
  <p><strong>However</strong>, when I go back to my previous view and come back the correct configuration is displayed, all is well. As you can see I have tried <code>$timeout</code> and <code>$apply()</code> and many other things, but none seem to work.</p>
  
  <p>I know this is a DOM updating issue because I can log the array and see that it is different (correct) from what the DOM shows (incorrect). Any help would be appreciated.</p>
  
  <p><strong>Update:</strong></p>
  
  <p>I am even using <code>&lt;pre ng-bind="instructionsObj.instructions|json&lt;/pre&gt;</code> to show the exact layout of the array and it is always correct. My mind is blown.</p>