My goal is to include a select list inside an ng-repeat loop, allowing for multiple instances of the select list to be displayed with the user selecting a value for each one. The code I am using is:
<div class="actionList" ng-repeat="selectedAction in inputDevice.selectedActions">
<select class="inputAction" ng-model="selectedAction" ng-options="action as action.fields.name for action in inputDevice.fields.baseDevice.fields.inputs">
<option value="">
Select Action
</option>
</select>
<button class="btn btn-primary" ng-click="addAction(inputDevice, $index)">
+
</button>
</div>
While it works well overall, I have encountered an issue where upon selecting an option from the select list, it reverts back to the default state without actually selecting the chosen option (the selected action's state also remains unchanged). I've attempted modifying the property within selectedAction, changing ng-model="selectedAction.value" instead of just selectedAction, but with no success. Interestingly, if I alter ng-model="selectedAction" to something like ng-model="foo", it works smoothly and I can see the select value bound to the new foo variable in the scope. Why is it that I cannot bind to the repeated element?