[SOLVED] Angularjs: How to make ui-select have only one way model biding?

Angularjs: How to make ui-select have only one way model biding?

With the angularjs navite select directive the model binding is only one way while in ui-select this seems to always be two way binding.

  <ui-select ng-model="uiSelected.animal">

    <ui-select-match>
            <span ng-bind="$select.selected.name"></span>
     </ui-select-match>

    <ui-select-choices repeat="animal in (animals | filter: $select.search) track by $index">
        <span ng-bind="animal.name"></span>
    </ui-select-choices>

</ui-select>

Here's the plunker showcasing my problem: https://plnkr.co/edit/FkZsFcMrTveWjXR5HNyT?p=preview

My issue:

How do I make ui-select to only have a one way biding with the model, so that when I alter the selected scope model it is not binded to the ui-select? If I rephrase: how do I make ui-select act like angular native select?

Solution

You might have to add a $watch to the animal/car and save your selected object in a different $scope variable. I don't see another way, since uiSelected references on an object in animals array.

Use on-select event:

on-select="onSelectCallback($item, $model)"

Have a look at this plunker: https://plnkr.co/edit/Zcb9xlPm6TW7DFk1sjAO?p=preview