Select not binding to data ng-repeated data

Question

I am trying to place a select list inside of a ng-repeat, to allow the select list to be displayed multiple times, with the user choosing a value for each seelct list displayed. My code is as follows:

      <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>

It works perfectly, except when I choose one of the select list options, the select list just returns to the default state and the option is not selected (the state of selected action remains unchanged as well). I have tried changing a property on selectedAction such as ng-model="selectedAction.value" instead of selectedAction itself, to the same results. If I change ng-model="selectedAction" to anything else such as ng-model="foo" it works fine, and I can observe the value of the select bound to the newly created value foo within the scope. Why am I unable to bind to the repeated element?

Answer 1

It would be much easier if you added a jsfiddle link to play with, but it seems to me that you're trying to set the ng-model to a primitive (string) instead of an object and therefore every time you change it, the value no longer exists. selectedAction.value won't work in that case either, because selectedAction is a string.

If inputDevice.selectedActions was an array of objects though, I think it would've worked fine.

Another thing you could try (not sure if it will work because I don't have a jsfiddle :) ) is, set ng-model="foo{{$index}}" - then it should theoretically save the value into a new scope variable with the index in the loop.