angular & ui-select2: showing preselected value doesn't work

Question

When using the ui-select2 (https://github.com/angular-ui/ui-select2), the preselected option is not shown properly.

I created a plunkr: http://plnkr.co/edit/Ek86jUciPo7rgBnbKdFc

When the page is loaded, the model of the select is set to the second option. And somehow, it is properly set in the select box, see: https://dl.dropboxusercontent.com/u/1004639/stackoverflow/screenshot-select2.png. But the value is not shown above the text box. Or in the select box when the select box is closed.

PS: I tried it without ng-options. Same problem.

Ectoparasite

Answer 1

I can get it working using ng-repeat and ng-selected. Unfortunately, though, when you use ng-repeat, you can only bind to a string. It's not ideal, but the choice does start out pre-selected.

Here's a working http://plnkr.co/edit/jodn35fvUQpdD2d5BpoC

<select ui-select2="" ng-model="selectedId" >
    <option value="">Choose...</option>
    <option ng-repeat="option in options" value="{{option.id}}" ng-selected="{{option.id == selectedId}}">{{option.name}}</option>
    </select>

And I updated the JS to add this line:

  $scope.selectedId = $scope.selected.id;

Predominance

Answer 2

https://github.com/angular-ui/ui-select2#working-with-dynamic-options

ui-select2 is incompatible with <select ng-options>. For the best results use <option ng-repeat> instead.

Valerivaleria