Angular-UI Sortable callback bug

by vishalvasani

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div ng:controller="controller">
    {{list}}
    {{list2}}
    <ul ui:sortable="sortableOptions" ng:model="list" class="group">
        <li ng:repeat="item in list" class="item">{{item}}</li>
    </ul>
    <br />
    <ul ui:sortable="sortableOptions" ng:model="list2" class="group">
        <li ng:repeat="item in list2" class="item">{{item}}</li>
    </ul>
    <hr />
    <div ng:repeat="item in list">{{item}}</div>
    <div ng:repeat="item in list2">{{item}}</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
    /*
 jQuery UI Sortable plugin wrapper

 @param [ui-sortable] {object} Options to pass to $.fn.sortable() merged onto ui.config
*/
angular.module('ui.sortable', [])
  .value('uiSortableConfig',{})
  .directive('uiSortable', [ 'uiSortableConfig',
        function(uiSortableConfig) {
        return {
          require: '?ngModel',
          link: function(scope, element, attrs, ngModel) {

              function combineCallbacks(first,second){
                  if( second && (typeof second === "function") ){
                      return function(e,ui){
                          first(e,ui);
                          second(e,ui);
                      };
                  }
                  return first;
              }

            var opts = {};

            var callbacks = {
                receive: null,
                remove:null,
                start:null,
                stop:null,
                update:null
            };

            angular.extend(opts, uiSortableConfig);

            if (ngModel) {

              ngModel.$render = function() {
                element.sortable( "refresh" );
              };

              callbacks.start = function(e, ui) {
		ui.item.sortable = { index: ui.item.index(),ngModalData:[] };
              };

              callbacks.update = function(e, ui) {
		
               ...

CSS

.item, .placeholder {
    padding: 2px;
    width: 50px;
    height: 20px;
    border: 1px solid #333;
    background: #EEE;
}

.placeholder {
    background: #AEF;
}

JavaScript

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

myapp.controller('controller', function ($scope) {
    $scope.list = ["1", "2", "3", "4", "5", "6"];
    
    $scope.list2 = ["7", "8", "9"];
    
    $scope.sortableOptions = {
        update: function(e, ui) {
            if (Number(ui.item.text()) === 6) {
                 ui.item.sortable["Invalid"]=true;
                ui.item.parent().sortable('cancel');
            }
        },
        receive: function(e, ui) {
            ui.sender.sortable('cancel');
            ui.item.parent().sortable('cancel'); 
        },
        connectWith: ".group",
        axis: 'y'
    };
});

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