Unable to update a given item in an array from Angularjs controller - angularjs

Question

I am having a requirement to create a search query of parameters and send it to server. I have created the drop downs from where the user will populate the values. Below is the code on the UI:
<div ng-repeat="criteria in criterias">
<div class="m-b">
<div class="form-group s-b" style="width: 150px;">
<span>classification</span>
<select ng-model="criteria.selectedClassification" class="form-control" id="classification" ng-options="classification for classification in classification" ng-change="handleClassification(criteria)" style="max-width:100%"></select>
</div>
<div class="form-group s-b" style="width: 150px;">
<span>Config</span>
<select id="config" ng-model="criteria.selectedConfig" ng-options="config for config in config" class="form-control" ng-change="handleConfig(criteria)" style="max-width:100%" ></select>
</div>
<div class="form-group s-b" style="width: 150px;">
<span>Attribute</span>
<select id="attribute" class="form-control" ng-options="attribute for attribute in attributes" ng-model="criteria.selectedAttribute" style="max-width:100%;" ng-change="handleAttrChange(criteria )"></select>
</div>
<div class="form-group s-b" style="width: 150px;">
<span>Predicate</span>
<select class="form-control" ng-model="criteria.predicate" style="max-width:100%">
<option value="matches">Matches</option>
<option value="not-matches">Not Matches</option>
</select>
</div>
<div class="form-group s-b" style="width: 100px;">
<span>Value</span>
<select class="form-control" name="account" ng-model="criteria.value" ng-options="item for item in values" style="max-width:100%">
</select>
</div>
<div class="form-group s-b" style="margin-top: 20px;">
<span>
<button class="btn btn-sm btn-primary pad-btn" type="submit" ng-click="addCriteria()"><i class="fa fa-plus"></i>
</button>
<button class="btn btn-sm btn-danger pad-btn" type="submit" ng-click="deleteCriteria(criteria)"><i
class="fa fa-minus"></i></button>
</span>
</div>
</div>
</div>
I have wrapped the code inside a repeat so that the user can create multiple criteria (each having one filter condition). The user can create criteria by clicking on the + icon. I am facing issues when working with one criteria, any update done on the config is setting the attributes of all the criteia instead of the current criteria.
I have created a working plunker to demo this. Please let me know where I am going wrong.
Link to Plunker - Link to Plunker

Answer 1

The issue is your list of attributes.
Whenever you are changing the config, you are calling a function that is changing the list of attributes. Each row of criteria is looking at the same attributes array. So if you change the config in the first and the third row, they are both affecting what attributes is set to, so it's filtering the array twice.
To avoid this, each of your rows should have an array of the lookups you're going to be filtering on. Then inside the function of the ng-change, filter the array that is in your current criteria, so that each row of criteria is using it's own lookup.