Angular Sortable Demo

HTML

<script src="http://code.angularjs.org/1.0.0rc10/angular-1.0.0rc10.js"></script>
<div ng-controller="SortableCTRL">
    <ul id="sortable">
        <li ng-repeat="item in sortableArray" ng-bind="item.num"></li>
    </ul>
    
    <button ng-click="add()">Add</button>
    <hr>
    <pre ng-bind="sortableArray|json"></pre>
</div>

CSS

li {
    padding: 5px;
    border: 1px solid #999;
    background: #eee;
    margin: 5px;
    cursor: move;
   border-radius: 9px 9px 9px 9px;
-moz-border-radius: 9px 9px 9px 9px;
-webkit-border-radius: 9px 9px 9px 9px;
border: 0px solid #000000;
}

JavaScript

function SortableCTRL($scope) {
    var sortableEle;
    
    $scope.sortableArray = [
        {'num':'One'}, {'num':'Two'}, {'num':'Three'}
    ];
    
    $scope.add = function() {
        $scope.sortableArray.push( {'num':'numbre'+$scope.sortableArray.length});
        
        sortableEle.refresh();
    }
    
    $scope.dragStart = function(e, ui) {
        ui.item.data('start', ui.item.index());
    }
    $scope.dragEnd = function(e, ui) {
        var start = ui.item.data('start'),
            end = ui.item.index();
        
        $scope.sortableArray.splice(end, 0, 
            $scope.sortableArray.splice(start, 1)[0]);
        
        $scope.$apply();
    }
        
    sortableEle = $('#sortable').sortable({
        start: $scope.dragStart,
        update: $scope.dragEnd
    });
}