angularJS: sync re-ordering list with data structure

Question

I am new to AngularJS.

I am trying to re-order an array using the Angular ui-sortable plugin. I want the data array to be in the same order as the html ul but can't seem to succeed in this.

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

myapp.controller('controller', function ($scope) {
    $scope.sortableOptions = {
        start: function (e, ui) {
            $scope.oldIndex = ui.item.index();
        },
        update: function (e, ui) {
            var newIndex = $scope.newIndex = ui.item.index();
            var oldIndex = $scope.oldIndex;

            $scope.oldArray = $scope.list.join(';');

            var item = $scope.list.splice(oldIndex, 1);
            $scope.list.splice(newIndex, 0, item[0]);

            $scope.itemMoved = item;
            $scope.newArray = $scope.list.join(';');
        }
    }

    $scope.list = ["one", "two", "three", "four", "five", "six"];
});

angular.bootstrap(document, ['myapp']);

Any ideas?

The fiddle: http://jsfiddle.net/DxjXQ/2/

Answer 1

you should wait until Angular updates it's scope (apply)

so possible solution is just set to the end of the queue

 $timeout(function(){
            $scope.newArray = $scope.list.join(';');
            }, 0);

http://jsfiddle.net/DxjXQ/5/