I'm using ui-select within an ng-repeat to create a select box for each item over a collection. However, when I select a node ID in any of the individual select boxes it ends up getting selected in all of them. How can I configure the {{$select.selected.id}}
part such that only the current choice select box gets updated? Here is the relevant code:
<div style="float:left; width:160px;" ng-repeat="choice in choices">
<div class="input-group">
<ui-select ng-model="node.selected" theme="bootstrap" ng-disabled="disabled" reset-csearch-input="true" style="width:50px; float:left">
<ui-select-match placeholder="{{choice.to_node_id}}">{{$select.selected.id}}</ui-select-match>
<ui-select-choices repeat="node in nodes | filter: $select.search">
<div ng-bind-html="node.id | highlight: $select.search" ng-click="updateChoiceLink(choice, node)"></div>
</ui-select-choices>
</ui-select>
</div>
I was able to solve the problem by binding the model to choice.selected
as opposed to node.selected
. This way each select box has a unique ng-model based on the choice.