Search code examples
angularjsangular-ui-select

Angular ui-select within ng-repeat


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>

Solution

  • I was able to solve the problem by binding the model to choice.selectedas opposed to node.selected. This way each select box has a unique ng-model based on the choice.