Angular ui.select not binding to ng-model

Question

I'm using angular ui.select and i'm having trouble with binding the selected value to a model. I am trying to set a variable of an object using ui.select ng-model="data". But for some reason it will not selected value will not bind to the model. This is the code I am using:

<ui-select ng-model="data" ng-disabled="disabled" theme='select2' style="min-width: 300px;" title="some title">
   <ui-select-match placeholder="Select a credit status in the list">[[ $select.selected.variable ]]</ui-select-match>
   <ui-select-choices repeat="options in options | filter: $select.search">
      <p>[[ options.variable ]]</p>
  </ui-select-choices>
</ui-select>

Using this does not bind the selected value to the model in my case. I then used $parent.data which does work but when I use multiple ui-selects only one is able to work at a time.

There must be something I am doing wrong any help is appreciated.

Artem · Accepted Answer · 2016-09-07T07:37:43.647

It's a common referencing issue.

You can use an object as ng-model

ng-model="data.value"

or you can try to initialize data inside the controller.

$scope.data = null;

or you can use the controllerAs view syntax as described in the John Papa's style guide (in this way you will avoid facing the same issue again and again).

<div ng-controller="CustomerController as controllerName">
   <ui-select ng-model="data" ng-disabled="disabled" theme='select2' style="min-width: 300px;" title="some title">
       <ui-select-match placeholder="Select a credit status in the list">[[ $select.selected.variable ]]</ui-select-match>
       <ui-select-choices repeat="options in options | filter: $select.search">
           <p>[[ options.variable ]]</p>
       </ui-select-choices>
   </ui-select>
</div>

score 2 · Answer 2 · answered Sep 06 '16 at 15:02

2

This Plunker is the demo of the component you're using:

http://plnkr.co/edit/6iiLpQlZpqjd9tIyTFQY?p=preview

try to use an object as ng-model.

ng-model="data.attribute"

answered Sep 06 '16 at 15:02

Andre.Anzi

151
6

score 0 · Answer 3 · answered Sep 06 '16 at 15:10

Since you are trying to use multiple ui-selects, I would recommend creating and initializing an array wrapped in a $scope object like the following:

$scope.selections = { selectedData = [] };

Then for the ng-model, you can use proper dot-notation:

ng-model="selections.selectedData"

Hope this helps!

Angular ui.select not binding to ng-model

3 Answers3