pragmatic-angular module example utilizing jQuery UI sortable

See https://github.com/lgersman/pragmatic-angular

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//cdn.rawgit.com/lgersman/pragmatic-angular/e6a1ce1de836ac935e3bfad4ae4290ca128a6db6/pragmatic-angular.js"></script>
<div ng-app="app">
    <div ng-controller="main" ng-on="{ 
            click     : { handler : onClick, data : { foo : 'bar'}},
            sortstop  : onSortstop 
        }"> 
            <span>click somewhere or drag'n sss drop in the list (and press <kbd>F12</kbd> to open you javascript console !)</span>
        <ul ng-jquery-plugin="{
            sortable : {
                helper               : 'clone',
                placeholder          : 'ui-state-highlight',
                stop                 : onStop
            }, 
            disableSelection : {
            }
        }">
            <li ng-repeat="item in items" class="ui-state-default">
                <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
                {{item}}
            </li>
        </ul>
        <pre>{{items}}</pre>
    </div>
</div>

CSS

ul { 
    font-family:verdana, sans;
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    width: 60%; 
}

ul li { 
    margin: 0 3px 3px 3px; 
    padding: 0.4em; 
    padding-left: 1.5em; 
    height: 1.2em; 
    line-height: 1.2em;
}

ul li span { 
    position: absolute; 
    margin-left: -1.3em; 
}

JavaScript

angular.module('app', ['pragmatic-angular'])
.controller('main', function($scope) {
    $scope.items=['alpha', 'beta', 'gamma', 'delta'];
    
    $scope.onStop = function(event, ui) {
        var item = angular.element(ui.item).scope().item;
        $scope.items.splice($scope.items.indexOf(item), 1)
        $scope.items.splice(ui.item.index(), 0, item);
        $scope.$apply();
    };
    
    $scope.onClick=function(event) {
        console.log( "onclick : data was ", event.data);
    };
    
    $scope.onSortstop=function(event, ui) {
        console.log( "onSortstop : item ", ui.item[0], " was moved to position ", ui.item.index());
    };
});