Ng-repeat not updating with array changes <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>