Angular ui-select multi select: Dropdown does not receive updates when selecting some elements from the controller

Question

When I click the "choose yellow color" button, I want to add a yellow list to the selected list. Yellow is selected, but the drop-down is shown in yellow. In the same way, I want to deselect yellow when I click the "Deselect Yellow" button. I can deselect the yellow color, but the yellow color does not appear in the drop-down list. Please help me in this matter. HTML:

<ui-select multiple ng-model="multipleDemo.colors" theme="select2" ng-disabled="disabled" style="width: 300px;"> <ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match> <ui-select-choices repeat="color in availableColors | filter:$select.search"> {{color}} </ui-select-choices> </ui-select> <p>Selected: {{multipleDemo.colors}}</p> <input type="button" value="select yellow color" ng-click="selectYellowColor()"/> <input type="button" value="deselect yellow color" ng-click="deselectYellowColor()"/> 

JS:

  $scope.availableColors = ['Red','Green','Blue','Yellow','Magenta','Maroon','Umbra','Turquoise']; $scope.multipleDemo = {}; $scope.multipleDemo.colors = ['Blue','Red']; $scope.selectYellowColor = function(){ if($scope.multipleDemo.colors.indexOf($scope.availableColors[3]) == -1){ $scope.multipleDemo.colors.push($scope.availableColors[3]); } }; $scope.deselectYellowColor = function(){ if($scope.multipleDemo.colors.indexOf($scope.availableColors[3]) != -1){ var index = $scope.multipleDemo.colors.indexOf($scope.availableColors[3]); $scope.multipleDemo.colors.splice(index, 1); } }; 

Here is the plunker link http://plnkr.co/edit/AHZj1zAdOXIt6gICBMuN?p=preview

Answer 1

UPD : this is issue in ui-select . You can use my solution as a partial workaround until this problem is resolved.

ui-select does not filter elements. It just evaluates your expression in the repeat attribute of ui-select-choices . If you want to exclude an already used value from the sentence, you can do it yourself.

Add an additional filter to repeat

 <ui-select-choices repeat="color in availableColors | filter:omitSelectedColors | filter:$select.search"> 

And then define your filter function:

 $scope.omitSelectedColors = function(color) { return $scope.multipleDemo.colors.indexOf(color) === -1; }