How to update the model of sorted element?

[ShurikAg]

Here is what I am trying to do:
http://codepen.io/anon/pen/BrqCv

Every time the item is moved from one place to another I need to update it's model. Instead I am getting an error (different in different browsers)
FF:

Error: ui.item.scope(...) is undefined
$scope.sortableOptions.update/<@http://araneum.com/js/22bbe1c_controllers_8.js:129
$http/promise.success/<@http://araneum.com/js/22bbe1c_angular_3.js:7946
qFactory/defer/deferred.promise.then/wrappedCallback@http://araneum.com/js/22bbe1c_angular_3.js:11319
qFactory/defer/deferred.promise.then/wrappedCallback@http://araneum.com/js/22bbe1c_angular_3.js:11319
qFactory/ref/<.then/<@http://araneum.com/js/22bbe1c_angular_3.js:11405
$RootScopeProvider/this.$get</Scope.prototype.$eval@http://araneum.com/js/22bbe1c_angular_3.js:12412
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://araneum.com/js/22bbe1c_angular_3.js:12224
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://araneum.com/js/22bbe1c_angular_3.js:12516
done@http://araneum.com/js/22bbe1c_angular_3.js:8204
completeRequest@http://araneum.com/js/22bbe1c_angular_3.js:8412
createHttpBackend/</xhr.onreadystatechange@http://araneum.com/js/22bbe1c_angular_3.js:8355

Is it even possible? How?

[thgreasi]

If you open a debugger and add a breakpoint to the errorgenus line, you can see that ui.item.scope() is undefined. Further inspection will reveal that jquery-ui calls the stop callback of the source sortable and the recieve callback of the target sortable.
At the time stop fires on the source sortable, the scope of the element is already destroyed, since the element was just removed from the sortable.

[thgreasi]

Long story short:

• Use the browser debugger
• Read the jquery-ui docs
  => place your code in the recieve or update callback of the target sortable.
  Take a look at canceling drag between connected lists drops item #107 for more info on the order that jquery-ui executes the callbacks in case of a cross-sortable sorting.