javascript - Why angular JS behave differently? -

in angular js controller, put list $scope below:

$scope.processes = ['process-aa','process-bb', 'process-cc'];  $scope.selectedprocess=-1; $scope.collapseprocess = function(index) {      console.log('-----------------------in collapseprocess--------------  %s, %s', $scope.selectedprocess, index  );      return $scope.selectedprocess != index;   };   $scope.switchcollapse = function(index)   {      $scope.selectedprocess = index;  } 

the page list processes , there div inside of each process, make div toggle. @ time, 1 div allowed expand. html below:

<li ng-repeat="process in processes" class="resultitem"     ng-click="switchcollapse($index)">     <div collapse="collapseprocess($index)"  class="collapseblock"> </div> </li> 

the above code totally works expected. when select first process, inner div expanded, if select second process, first process's div collapsed , second process's div expanded.

however, don't understand why doesn't work if change code be:

<li ng-repeat="process in processes" class="resultitem"     ng-click="selectedprocess=$index">     <div collapse="toggleprocess($index)"  class="collapseblock"> </div> </li> 

if change code above, when click on process, div won't expaned. output in function collapseprocess is: -----------------------in collapseprocess-------------- -1 0 -----------------------in collapseprocess-------------- -1 1 -----------------------in collapseprocess-------------- -1 2

the selectedprocess -1 (which initial value in controller). weird, don't understand why it's that?

and more interesting, if change html be:

<li ng-repeat="process in processes" class="resultitem"     ng-click="selectedprocess=$index">     <div collapse="$scope.selectedprocess != index"  class="collapseblock">    </div> </li> 

then, if select specific process, internal div expanded, however, div expanded original selected process won't collapsed, so, more , more divs will expanded if select more , more process.

since i'm newbie angular js, don't understand difference between code blocks. on this? lot in advance.

thanks response. missed $ while typing. actual code have $index.

and figured out issue, seems ng-repeat create own scope, why doesn't work.

if change code be:

 $scope.obj={     selectedprocess: -1  }; 

and refer obj.selectedprocess in html. work. guess it's caused scope created ng-repeat. right?