用于jquery UI的Angularjs 1.3指令可排序

Question

这是小提琴：

http://jsfiddle.net/HB7LU/7571/

如果您使用可排序项目并将其随机播放几次，很快您就会发现底层数组与显示项目的顺序不同步。有什么想法会发生这种情况吗？ arraymove是经过良好测试的功能，没有任何错误。

HTML：

<div ng-controller="MyCtrl" id="maindiv">
     Items debug: {{items}}
     <br>
     Items in ng-repeat:
    <div sortable="items">
      <div ng-repeat="item in items track by $index" style="background:#EEE; margin: 1px">
          {{item}}
       </div>
    </div>
</div>

JS：

var app = angular.module('myApp',[]);

app.directive('sortable', function($timeout) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var startIndex = -1;
            var coll;
            scope.$watch(attrs.sortable, function(value) {  coll = value; });
            $(element).sortable({
                containment: '#maindiv',
                scroll:false,
                helper:'clone',
                start: function (event, ui) {
                    startIndex = ($(ui.item).index());
                },
                stop: function (event, ui) {
                    var newIndex = ($(ui.item).index());
                    $timeout(function() {
                            arraymove(coll, startIndex, newIndex);
                    }, 0);
                }
            });
        }
    }
});


app.controller('MyCtrl', function($scope) {
    $scope.items = ['test', 'apple', 'banana'];
});