angular ui-select - update selected when updating choices

Question

So I have a pretty basic select that looks like this:

<ui-select theme="select2" search-enabled="false" ng-model="obj.myModel">
    <ui-select-match>{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="item.value as item in choices">
        <span>
            {{item.name}}
        </span>
    </ui-select-choices>
</ui-select>

Let's say the choices are defined as

$scope.choices = [
    {value: 'some_value_1', name: 'Default name'},
    {value: 'some_value_2', name: 'Default name 2'}
]

Now let's assume that the user has selected the item with value some_value_1. After that a server response comes in that updates the choices list with different names

$scope.choices = [
   {value: 'some_value_1', name: 'Real name'},
   {value: 'some_value_2', name: 'Real name 2'}
]

Notice that the value part that is saved in the model stays the same. The name in <ui-select> is still Default name when I would want it to change to Real name.

plnkr.co

Is there a way to make the selected name correspond to updated choices?

The problem is that the value in obj.myModel never changes so the screen never updates. I'm sure there is a more elegant way to do this, but if you set obj.myModel = '' at the time the new choices are set, let a digest cycle happen, and then reset it to the value then the screen updates. You can do this using a setTimeout() after your choices change. There may be a way to hook into some event but I'm not sure off the top of my head — Scott, Oct 20 '15 at 23:30

angular ui-select - update selected when updating choices

0 Answers0