sortable="true" does not update the ng-model

[stevematyas]

Reference: #209

After drag n' drop of options selected (re-ordering), the selected items (<ui-selelct ... ng-model="mycontrollerscopeattr".. >) is not updated.

Try it out here: http://plnkr.co/edit/eiwaOrkK4V9ZGwfGE5IV?p=preview

If this is not a bug (and developer error) then, can you make the example work? I'll gladly update any documentation.

[homerjam]

Looks like it needs a $scope.$apply on the drop event, or rather $scope.$parent.$apply(). As you can see if your change the order then select a new person the changes are reflected in the view.

You could trigger this using the event uiSelectSort:change for now.

// in your controller for example

$scope.on('uiSelectSort:change', function(event, args) {
    if (!$scope.$$phase) {
        $scope.$apply();
    }
});

[stevematyas]

Thanks @homerjam for responding. Unfortunately, I'm too new to both Angular and ui-select to know exactly what you mean though at a high-level it is as though you want to copy/assign $select.ngModel.$viewValue to $select.ngModel.$modelValue or $select.selected though not exactly sure. I just don't know enough of both frameworks / libs to know for sure how to get the underlying ngModel updated properly.

        move.apply(theList, [droppedItemIndex, newIndex]);

        scope.$apply(function() {
          $select.selected = $select.ngModel.$viewValue;  // ??? 
          scope.$emit('uiSelectSort:change', {
            array: theList,
            item: itemToMove,
            from: droppedItemIndex,
            to: newIndex
          });
        });

[homerjam]

The model is updated, but the view isn't. The view is updated on a digest cycle. The digest cycle is what needs to be triggered in ui-select (but currently isn't). You can workaround this with my suggested fix - which might be better than trying to guess at a fix to a lib/framework you don't know very well yet.

[stevematyas]

@homerjam : Thanks for your guidance. I'll do my best to apply what you've offered thus far.

Updated Plunker with @homerjam's edits http://plnkr.co/edit/Oxk6DnZbCdM0cZHXAg8i?p=info and sadly the below doesn't work :(.

Yes, selecting a new item after re-ordering does cause ng-model to reflect the "new selected order" as well as the new item. The issue is that after a drag n' drop of options selected (re-ordering), the selected items (<ui-selelct ... ng-model="mycontrollerscopeattr".. >) is not updated.

<p>selected items (order isn't correct): {{mycontrollerscopeattr}}</p>

app.controller('DemoCtrl', function($scope, $http, $timeout) {
  //added listener per @homerjam per https://github.com/angular-ui/ui-select/issues/974
  $scope.$on('uiSelectSort:change', function(event, args) {
    if (!$scope.$$phase) { //http://stackoverflow.com/questions/20263118/what-is-phase-in-angularjs
        $scope.$apply();
    }
  });

[homerjam]

Quick fix:

  //added listener per @homerjam per https://github.com/angular-ui/ui-select/issues/974
  $scope.$on('uiSelectSort:change', function(event, args) {
    console.log('uiSelectSort:change', args);
    $scope.multipleDemo.selectedPeople = args.array;
    if (!$scope.$$phase) { //http://stackoverflow.com/questions/20263118/what-is-phase-in-angularjs
        $scope.$apply();
    }
  });

[stevematyas]

@homerjam : Bingo! That worked. (bow)

[faisalferoz]

@homerjam fix works. +1

[pgrm]

For those, who are looking for a bower-solution until this fix will be merged, you can set this in your bower.json file:

"angular-ui-select": "grmanit/ui-select#master"