Angular ui-select multiple ng-model won't bind?

Question

I've bound a model to an ui-select like so

<ui-select multiple ng-model="selectedPeople" theme="bootstrap" style="width:300px;">

However, neither the $scope.selectedPeople gets updated upon selection, nor the ui-select choices are updated when the array is manually changed.

See plunker here

What i'm trying to do here is to programmatically add an item in the ui-select listing. How to?

You are trying to push in a selection from an external function, yes? — tpie, May 02 '15 at 11:18
The "alter model" seems to work fine, while the "append" button doesn't — brazorf, May 02 '15 at 11:39
Are you wanting to add to the choices or add to the selection? or both? — tpie, May 02 '15 at 11:40

camden_kid · Answer 1 · 2015-05-02T11:43:58.673

7

Here's a working Plunker.

Make selectedPeople a property of a scope object:

JS

$scope.test = {};

Markup

<ui-select multiple ng-model="test.selectedPeople" theme="bootstrap" style="width:300px;">

...

<pre>{{ test.selectedPeople }}</pre>

“Whenever you have ng-model there’s gotta be a dot in there somewhere. If you don’t have a dot, you’re doing it wrong.” - http://jimhoskins.com/2012/12/14/nested-scopes-in-angularjs.html

Edit: to alter the model make this change:

$scope.test = function() {
  $scope.people = [
    { name: 'A',    email: 'a@email.com',    age: 10 },
    { name: 'B',    email: 'b@email.com',    age: 12 },
  ];
}

edited May 02 '15 at 11:43

answered May 02 '15 at 11:29

camden_kid

12,591
11
52
88

1

Your plunker doesn't seem to work, clicking the buttons has no effect for me – brazorf May 02 '15 at 11:35
uhm, still i can't see the values appear in the select, they're just added to the model object – brazorf May 02 '15 at 11:40
@camden_kid Punker view does not show the pushed items, although the model is correctly updated – Carlos Morales Aug 21 '15 at 08:39
@CarlosBarcelona Could you explain what you mean? Clicking "Alter model" does change the options in the input. – camden_kid Aug 21 '15 at 09:14
@camden_kid, after clicking "Alter model" nothing happens, neither in the select box nor the "selectedPeople contents". Clicking on "append some item" does push values into contents, but not in the select box. I've tested on Chrome (Mac and Windows) – Carlos Morales Aug 21 '15 at 13:53

score 1 · Answer 2 · answered May 18 '15 at 09:40

1

it's bug! use like this ng-model="someObject.selectedPeople" every things solved!

$scope.someObject = {
   selectedPeople: []
};

answered May 18 '15 at 09:40

user1642952

11
1

score 0 · Answer 3 · answered May 02 '15 at 11:36

Working Demo

The way I have accomplished this before is to add a $watch function inside the ui-select directive's link function, at the end:

ui-select directive source:

 scope.$watch(function() {
      return scope.$parent.valToPush;
      }, function(newVal) {
        $select.selected.push(newVal);
    })

Controller:

$scope.test = function() {
    $scope.valToPush = 
      { name: 'A',    email: 'a@email.com',    age: 10 }
    ;
  }

Now in your controller $scope, assign whatever you want to push into the ui-select to $scope.valToPush.

The object that ui-select holds selected items in is called $select.selected, so that's ultimately where anything you want displayed has to be put.

score 0 · Answer 4 · answered Dec 22 '16 at 09:02

In order to make it work, you have to use the controllerAs syntax, or encapsulate your model inside an object in your controller. See the Snippet:

angular.module('myApp',['ui.select']).controller('MyController', function ($scope) {
  console.log("mycontroller");
  $scope.myUiSelect={model:{}}; // encapsulate your model inside an object.
  $scope.availableData=["a","b","c"]; //some random options
  $scope.onDatasetChanged = function(){
//    console.log("selected data",$scope.myUiSelect);
  }
});

<link href="https://rawgit.com/angular-ui/ui-select/master/dist/select.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://rawgit.com/angular-ui/ui-select/master/dist/select.js"></script>
<body ng-app="myApp" ng-controller="MyController">
  <ui-select multiple ng-model="myUiSelect.model" close-on-select="false" title="Choose a dataset" ng-change="onDatasetChanged()">
    <ui-select-match placeholder="Select something">{{$item.label}}</ui-select-match>
      <ui-select-choices repeat="data in availableData | filter:$select.search">
                        {{data}}
      </ui-select-choices>
  </ui-select>
  <p>{{myUiSelect}}</p> <!-- Print your model stored inside myUiSelect object -->
</body>

Angular ui-select multiple ng-model won't bind?

4 Answers4