I am having two ng-repeat for child and parent divs as follows

<div ng-repeat="stage in stages">
  <div ng-repeat="step in steps">
    <button ng-click="clickedStageAndStep($index)">
  </div>
</div>

$scope.clickedStageAndStep = function(index) {
  console.log("Step Index: " + index)
};

I wanna get child and parent indexes. How can I fetch?

I am having two ng-repeat for child and parent divs as follows

<div ng-repeat="stage in stages">
  <div ng-repeat="step in steps">
    <button ng-click="clickedStageAndStep($index)">
  </div>
</div>

$scope.clickedStageAndStep = function(index) {
  console.log("Step Index: " + index)
};

I wanna get child and parent indexes. How can I fetch?

• javascript
• angularjs
• angularjs-ng-repeat

• 1 To access the index of the parent you have to go two steps up by writing $parent.$parent.$index See here: [ stackoverflow.com/questions/26875437/… ] – Avantika Saini Commented May 23, 2016 at 7:21
• 1 Possible duplicate of passing 2 $index values within nested ng-repeat – James Brierley Commented May 23, 2016 at 12:31

5 Answers 5

Use $parent.$index

Each ng-repeat has its own scope and $index refers to innermost scope of ng-repeat

$scope.clickedStageAndStep = function(parent, child) {
  console.log("Step Index: " + child);
};

<div ng-repeat="stage in stages">
  <div ng-repeat="step in steps">
    <button ng-click="clickedStageAndStep($parent.$index,$index)"></button>
  </div>
</div>

Note: </button> tag is not closed.

Define a variable that for parent index

    <div ng-repeat="stage in stages" ng-init="stageNumber = $index">
      <div ng-repeat="step in steps">
          <button ng-click="clickedStageAndStep($index, $parent.$index)" >YourButton </button>
      </div>
    </div>

    $scope.clickedStageAndStep = function(stageIndex,stepIndex) {
      console.log("Step Index: " + stepIndex + "And StageIndex: " + stageIndex)
    };

Use $parent.$index

HTML:

<div ng-app="app" ng-controller="ctrl">
  <div ng-repeat="stage in stages">
    <div ng-repeat="step in stage.steps">
      <span>Index: {{$index}}. ParentIndex:{{$parent.$index}}</span>
    </div>
  </div>
</div>

JS:

angular.module('app', []).
controller('ctrl', function($scope) {
  $scope.stages = [{
    steps: ['1', '2', '3']
  }, {
    steps: ['4', '5']
  },
  {steps:['6','7','8']}];
})

JSFIDDLE.

Use $index and $parent.$index to get child and parent indexes.

 <div ng-repeat="stage in stages">
      <div ng-repeat="step in steps">
        <button ng-click="clickedStageAndStep($parent.$index,$index)">
      </div>
    </div>

    $scope.clickedStageAndStep = function(stageIndex,stepIndex) {
      console.log("Stage Index: " + stageIndex + "And Step Index: " + stepIndex);
    };

Try

<div ng-init="parentIndex = $index"> </div>