Drop down value replicates in nog options Angular

Question

I have a dynamically generated html table that adds rows based on the record that is displayed. I'm adding a column that will contain a dropdown. I used ng-options for it, however every time I change one record, the rest are also updated. Tried changing it to ng-repeat and get the same result. See code below:

        <td>    

       <select class="form-control" ng-model="$ctrl.selectedRC" ng-    options="r.ccd as (r.OName + ' -- '+ r.RCName)  for r in $ctrl.RC track by r.ccd"> </select>
<!--if I have 5 records, all dropdowns in the table change -->
    </td> 

Using ng-repeat:

 <select class="form-control" ng-model="$ctrl.selectedRC" <option value="" ng-selected="true">--Select one--</option>
                        <option ng-repeat="r in $ctrl.RC"
                        value="{{r.OName}}"
                        ng-selected="{{r.OName === selectedRC}}">{{r.RCName}}
                        </option>

                        </select>

I know that these two are currently displaying two different things (one a concatenated set of values, the other juts one). But my main interest is to figure out how to have each <td> have its own dropdown without affecting the rest of the rows.

Answer 1

Simply because you use the same ng-model for all rows.

You need to define a different one for each row.

You do this:

ng-model="$ctrl.selectedRC"

but you need something like this:

ng-model="$ctrl.selectedRC[$index]"

where $index is your reference to the row.