AngularJS disabling one dropdown in ng-repeat

Question

I have the following ng-repeat in my HTML code:

<div ng-repeat="a in items">
  <div>
    <span>{{a.name}}</span>
  </div>
  <div>
    <select ng-model="a.c_id" ng-options="d.c_id as d.description for d in loclist" ng-disabled="display" ng-change="selected(a.c_id)">
    </select>
  </div>

Then in my controller I have:

$scope.display = false;
$scope.selected = function (value) {
    $scope.te = value;
    if ($scope.te == 3) {
        $scope.display = true;
    }        
};

Problem I am facing is that when I change the selection in the drop down it is supposed to disable or enable the dropdown based on value. However when I change the selection in one of the drop down that has value of 3 all the dropdowns change to disabled state rather than that particular one.

Please let me know how to fix this code so when after ng-repeat has displayed all rows and I change the dropdown value of one of the rows it just disables that particular one rather than disabling all the dropdowns in all rows.

Answer 1

Angular ng-repeat creates child scopes inherited from parent scope. In your case, all your ng-repeat 's scopes inherit the display property from parent scope. Therefore when this property changes, it reflects on all scopes.

Try this instead of $scope to access the current scope of ng-repeat :

$scope.selected = function (value) {
     this.te = value;
     if (this.te == 3) {
         this.display = true;
     }        
};