Merged PR #56.

Summary of code changes (in code order):
* Removed apply() in favor of inlined anonymous functions
* Removed ngModel.$render
* Added scope.$watch for attrs.ngModel
* Added callbacks.activate to store elements of ngRepeat and positions
* Added callbacks.receive to record a receive
* Minor changes to callbacks.stop that now utilizes values saved earlier
* Major changes to callbacks.update
* Minor changes to scope.$watch(attrs.uiSortable), (can be backported)

Author: thgreasi

bower.json

@@ -16,11 +16,11 @@
     "package.json"
   ],
   "dependencies": {
-    "angular": "~1.0.x",
+    "angular": "~1.2.x",
     "jquery-ui": ">= 1.9",
     "jquery-simulate": "latest"
   },
   "devDependencies": {
-    "angular-mocks": "~1.0.x"
+    "angular-mocks": "~1.2.x"
   }
 }

src/sortable.js

@@ -1,20 +1,20 @@
-'use strict';
-
 /*
  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', '$log',
-    function(uiSortableConfig, log) {
+  .value('uiSortableConfig',{})
+  .directive('uiSortable', [
+    'uiSortableConfig', '$timeout', '$log',
+    function(uiSortableConfig, $timeout, $log) {
       return {
         require: '?ngModel',
         link: function(scope, element, attrs, ngModel) {
+          var savedNodes;
 
-          function combineCallbacks(first, second) {
-            if (second && (typeof second === 'function')) {
+          function combineCallbacks(first,second){
+            if(second && (typeof second === "function")) {
               return function(e, ui) {
                 first(e, ui);
                 second(e, ui);
@@ -27,100 +27,140 @@ angular.module('ui.sortable', [])
 
           var callbacks = {
             receive: null,
-            remove: null,
-            start: null,
-            stop: null,
-            update: null
-          };
-
-          var apply = function(e, ui) {
-            if (ui.item.sortable.resort || ui.item.sortable.relocate) {
-              scope.$apply();
-            }
+            remove:null,
+            start:null,
+            stop:null,
+            update:null
           };
 
           angular.extend(opts, uiSortableConfig);
 
           if (ngModel) {
 
-            ngModel.$render = function() {
-              element.sortable('refresh');
-            };
+            // When we add or remove elements, we need the sortable to 'refresh'
+            // so it can find the new/removed elements.
+            scope.$watch(attrs.ngModel+'.length', function() {
+              // Timeout to let ng-repeat modify the DOM
+              $timeout(function() {
+                element.sortable("refresh");
+              });
+            });
 
             callbacks.start = function(e, ui) {
-              // Save position of dragged item
-              ui.item.sortable = {
-                index: ui.item.index()
-              };
+              // Save the starting position of dragged item
+              ui.item.sortable = { index: ui.item.index() };
             };
 
-            callbacks.update = function(e, ui) {
-              // For some reason the reference to ngModel in stop() is wrong
-              ui.item.sortable.resort = ngModel;
+            callbacks.activate = function(e, ui) {
+              // We need to make a copy of the current element's contents so
+              // we can restore it after sortable has messed it up.
+              // This is inside activate (instead of start) in order to save
+              // both lists when dragging between connected lists.
+              savedNodes = element.contents();
+
+              // If this list has a placeholder (the connected lists won't),
+              // don't inlcude it in saved nodes.
+              var placeholder = element.sortable('option','placeholder');
+
+              // placeholder.element will be a function if the placeholder, has
+              // been created (placeholder will be an object).  If it hasn't
+              // been created, either placeholder will be false if no
+              // placeholder class was given or placeholder.element will be
+              // undefined if a class was given (placeholder will be a string)
+              if (placeholder && placeholder.element) {
+                savedNodes = savedNodes.not(element.find(
+                  "." + placeholder.element()
+                    .attr('class').split(/\s+/).join('.')));
+              }
             };
 
-            callbacks.receive = function(e, ui) {
-              ui.item.sortable.relocate = true;
-              // added item to array into correct position and set up flag
-              ngModel.$modelValue.splice(ui.item.index(), 0, ui.item.sortable.moved);
-            };
+            callbacks.update = function(e, ui) {
+              // Save current drop position but only if this is not a second
+              // update that happens when moving between lists because then
+              // the value will be overwritten with the old value
+              if(!ui.item.sortable.received) {
+                ui.item.sortable.dropindex = ui.item.index();
+
+                // Cancel the sort (let ng-repeat do the sort for us)
+                // Don't cancel if this is the received list because it has
+                // already been canceled in the other list, and trying to cancel
+                // here will mess up the DOM.
+                element.sortable('cancel');
+              }
 
-            callbacks.remove = function(e, ui) {
-              // copy data into item
-              if (ngModel.$modelValue.length === 1) {
-                ui.item.sortable.moved = ngModel.$modelValue.splice(0, 1)[0];
-              } else {
-                ui.item.sortable.moved = ngModel.$modelValue.splice(ui.item.sortable.index, 1)[0];
+              // Put the nodes back exactly the way they started (this is very
+              // important because ng-repeat uses comment elements to delineate
+              // the start and stop of repeat sections and sortable doesn't
+              // respect their order (even if we cancel, the order of the
+              // comments are still messed up).
+              savedNodes.detach().appendTo(element);
+
+              // If received is true (an item was dropped in from another list)
+              // then we add the new item to this list otherwise wait until the
+              // stop event where we will know if it was a sort or item was
+              // moved here from another list
+              if(ui.item.sortable.received) {
+                scope.$apply(function () {
+                  ngModel.$modelValue.splice(ui.item.sortable.dropindex, 0,
+                                             ui.item.sortable.moved);
+                });
               }
             };
 
             callbacks.stop = function(e, ui) {
-              // digest all prepared changes
-              if (ui.item.sortable.resort && !ui.item.sortable.relocate) {
-
-                // Fetch saved and current position of dropped element
-                var end, start;
-                start = ui.item.sortable.index;
-                end = ui.item.index();
-
-                // Reorder array and apply change to scope
-                ui.item.sortable.resort.$modelValue.splice(end, 0, ui.item.sortable.resort.$modelValue.splice(start, 1)[0]);
-
+              // If the received flag hasn't be set on the item, this is a
+              // normal sort, if dropindex is set, the item was moved, so move
+              // the items in the list.
+              if(!ui.item.sortable.received && ('dropindex' in ui.item.sortable)) {
+                scope.$apply(function () {
+                  ngModel.$modelValue.splice(
+                    ui.item.sortable.dropindex, 0,
+                    ngModel.$modelValue.splice(ui.item.sortable.index, 1)[0]);
+                });
               }
             };
 
-            scope.$watch(attrs.uiSortable, function(newVal) {
-              angular.forEach(newVal, function(value, key) {
+            callbacks.receive = function(e, ui) {
+              // An item was dropped here from another list, set a flag on the
+              // item.
+              ui.item.sortable.received = true;
+            };
 
-                if (callbacks[key]) {
-                  // wrap the callback
-                  value = combineCallbacks(callbacks[key], value);
+            callbacks.remove = function(e, ui) {
+              // Remove the item from this list's model and copy data into item,
+              // so the next list can retrive it
+              scope.$apply(function () {
+                ui.item.sortable.moved = ngModel.$modelValue.splice(
+                  ui.item.sortable.index, 1)[0];
+              });
+            };
 
-                  if (key === 'stop') {
+            scope.$watch(attrs.uiSortable, function(newVal, oldVal) {
+              angular.forEach(newVal, function(value, key) {
+                if(callbacks[key]) {
+                  if( key === 'stop' ){
                     // call apply after stop
-                    value = combineCallbacks(value, apply);
+                    value = combineCallbacks(
+                      value, function() { scope.$apply(); });
                   }
+                  // wrap the callback
+                  value = combineCallbacks(callbacks[key], value);
                 }
-
                 element.sortable('option', key, value);
               });
             }, true);
 
             angular.forEach(callbacks, function(value, key) {
-
               opts[key] = combineCallbacks(value, opts[key]);
             });
 
-            // call apply after stop
-            opts.stop = combineCallbacks(opts.stop, apply);
-
           } else {
-            log.info('ui.sortable: ngModel not provided!', element);
+            $log.info('ui.sortable: ngModel not provided!', element);
           }
 
           // Create sortable
           element.sortable(opts);
         }
       };
     }
-  ]);
+  ]);