AngularUI UI-sortable Index Update Issue

Question

I am having a weird bug with AngularUI's ui-sortable directive. For the most part, dragging the elements seems fine where the index gets updated when an element is dragged into the new position. However, there are occurrences when it is not getting updated. I have created a repeatable instance where the issue comes up. On first run, drag the line 2 // two line down one row and the index is clearly not updated.

Is there a method to fix this?

HTML:

<section ng:controller="controller" ui-sortable ng-model="nums">
    <div ng-repeat="i in nums">
       {{$index}} // {{i}}
    </div>
</section>

JS:

var myapp = angular.module('myapp', ['ui']);
myapp.controller('controller', function ($scope) {
    $scope.nums = ['zero','one','two','three','four','five'];
});
angular.bootstrap(document, ['myapp']);

Jsfiddle: http://jsfiddle.net/jeffreyqua/hKYWr/1225/

Answer 1

The solution to your problem is much simpler than you would probably would have thought. You're using an old version of Angular-UI Sortable plugin that doesn't play well with newer jQuery plugins.

The latest one will fix your issue: https://github.com/angular-ui/ui-sortable/blob/c4b8e1b9ce8a7e0525aff3ca31f439e30c5b0347/src/sortable.js (The hash is so that it's pegged to a known working version. You can also make a local copy from master)

JS Fiddle with import of the newer version of sortable. http://jsfiddle.net/9eVEc/

Note that you will have to change your angular.module dependency to include ['ui.sortable'] instead of just ['ui'].

i.e.:

var myapp = angular.module('myapp', ['ui.sortable']);