JS code:

$scope.addFunction = function(){
        $scope.dummyList1 = [];
    let n=4;
    for(let i=0;i<n;i++)
    {
        $scope.dummyList1.push({key:i});
    }
};

$scope.addFunction();

$scope.initializeSortable1 = function(){
        let myArguments1 = {};
        $( ".sortable3" ).sortable({
            stop : function( event, ui ) {
                if (this === ui.item.parent()[0]) {
                     if (ui.sender == null) {
                        myArguments1 = assembleData(this);
                        myArguments1;
                    }
                }
                var newList = [];
                for(var i=0;i<myArguments1.length;i++){
                    newList.push({key:myArguments1[i]});
                }

                $scope.dummyList1 = newList;

            }
        });
    };

    $scope.initializeSortable1();

html code(angular):

                    <div>
                        <div class="sortable3">
                            <div ng-repeat="xx in dummyList1  track by $index" id="{{xx.key}}" >
                                <div>{{xx.key}}</div>
                            </div>
                        </div>
                    </div>

creates a sortable list as: 0 1 2 3

now when I drag and drop 0 over 3, it is expected the list becomes: 1 2 3 0

but instead it becomes: 1 0 2 3 or something else at times.

now on removing the code

            var newList = [];
            for(var i=0;i<myArguments1.length;i++){
                newList.push({key:myArguments1[i]});
            }

            $scope.dummyList1 = newList;

from the stop function, the sorting works as expected. but I require this piece of code as I need to update the parent list =>$scope.dummyList1 responsible for rendering on UI on every update.

please point out the issue or suggest a suitable alternative.

Thanks