angularjs ng-model inside nested ng-repeat

Question

I don't know whether this is duplicate question or not. I have started exploring AngularJs. Right now I am facing this problem. Here is the example demo example

When ever I click first select drop down the below also gets updated. I know this is due to same ng-model. So, how could I generate different ng-model for two different select drop down. Please guide me as I am very new to angularjs world

Answer 1

You can bind to the color object you're displaying:

<select ng-model="color.levelmodel" ng-options="c.id for c in levels">
    <option value="">-- choose color --</option>
</select>

or to the selecteds object like this:

<select ng-model="selecteds[$index].levelmodel" ng-options="c.id for c in levels">
    <option value="">-- choose color --</option>
</select>

Where $index is the current index of the color object inside the colors collection.

Answer 2

I would bind to a level property on each color. This way instead of trying to have a random list of selected values, you have one belonging to each color, which makes much more sense.

$rootScope.colors = [{
      name: 'black',
      shade: 'dark',
      level: {'id': '' }
    }, {
      name: 'white',
      shade: 'light',
      level: {'id': '' }
}];

$scope.levels = [{
    "id": "1" 
}, {
    "id": "2" 
}, {
    "id": "3"
}];

<li ng-repeat="color in colors">
    <select ng-model="color.level" ng-options="c.id for c in levels">
        <option value="">-- choose color --</option>
    </select>
</li>