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.

Answer 1

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>