Angular ng-repeat multiple row table with select

Question

So I have this table with select boxes on each row. The problem is that when I make a change in one select box, all of them get changed showing the same value. What I need is to unbind all select boxes to be able to have different selections on each one of them.

Code goes like:

<tr ng-repeat="item in userMappings.items" ng-model="item.mapped">
  <td class="col-md-3" ng-model="mappingType.name">
    {{item.idsport}}, Game Type {{item.idgametype}}, {{item.name}} (Current limit {{item.value}})
  </td>                   
   <td class="col-md-3 mapType" style="padding-bottom: 25px; padding-left: 15px" >
    <h4>Mapping Type: <span style="font-size:0.8em">{{selectedType}}</span> </h4> <br />
    <select ng-model="mappingType.name" ng-change="which($index); selectedRow()" ng-options="item.name for item in mappingType"></select>
  </td>
</tr>

Answer 1

When you use ng-model to bind to mappingTypes.name it will modify the property on the controller scope because that's where it's defined. mappingTypes isn't part of ng-repeat 's scope so it goes through the scope inheritance chain and updates it there. So when you select an item, mappingTypes is now an array with a name property. All of your items bind to that same array, so they all have the same value.

If you want to only change a specific item in ng-repeat , you should use something like item.mapping . if you modify anything other than item it's modifying the entire controller's scope.