When using ng-repeat to load multiple select dropdown elements, each dropdown contains the same set of values. However, when a user selects an option from one select box, that option should not appear in any of the other select boxes.
For example, if a user selects Option A from select box 1, then Option A should be excluded from select box 2 and any other select box as well.
You can view a working example on Plunker: here
Here is the code snippet:
<option ng-repeat="option in data.availableOptions | filter:arrayFilter(select.selectedOption,$index)" value="{{option.id}}">
$scope.arrayFilter = function(selectionArray, position) {
return function(item, index) {
return selectionArray.indexOf(item.id) == -1 || item.id == selectionArray[position];
}
}