passing 2 $index values within nested ng-repeat

So I have an ng-repeat nested within another ng-repeat in order to build a nav menu. On each <li> on the inner ng-repeat loop I set an ng-click which calls the relevant controller for that menu item by passing in the $index to let the app know which one we need. However I need to also pass in the $index from the outer ng-repeat so the app knows which section we are in as well as which tutorial.

<ul ng-repeat="section in sections">
    <li  class="section_title {{}}" >
        <li class="tutorial_title {{}}" ng-click="loadFromMenu($index)" ng-repeat="tutorial in section.tutorials">

here's a Plunker


Each ng-repeat creates a child scope with the passed data, and also adds an additional $index variable in that scope.

So what you need to do is reach up to the parent scope, and use that $index.


<li class="tutorial_title {{}}" ng-click="loadFromMenu($parent.$index)" ng-repeat="tutorial in section.tutorials">

Way more elegant solution than $parent.$index is using ng-init:

<ul ng-repeat="section in sections" ng-init="sectionIndex = $index">
    <li  class="section_title {{}}" >
        <li class="tutorial_title {{}}" ng-click="loadFromMenu(sectionIndex)" ng-repeat="tutorial in section.tutorials">


What about using this syntax (take a look in this plunker). I just discovered this and it's pretty awesome.

ng-repeat="(key,value) in data"


<div ng-repeat="(indexX,object) in data">
    <div ng-repeat="(indexY,value) in object">
       {{indexX}} - {{indexY}} - {{value}}

With this syntax you can give your own name to $index and differentiate the two indexes.

Just to help someone who get here... You should not use $parent.$index as it's not really safe. If you add an ng-if inside the loop, you get the $index messed!

Right way

    <tr ng-repeat="row in rows track by $index" ng-init="rowIndex = $index">
        <td ng-repeat="column in columns track by $index" ng-init="columnIndex = $index">

          <b ng-if="rowIndex == columnIndex">[{{rowIndex}} - {{columnIndex}}]</b>
          <small ng-if="rowIndex != columnIndex">[{{rowIndex}} - {{columnIndex}}]</small>



When you are dealing with objects, you want to ignore simple id's as much as convenient.

If you change the click line to this, I think you will be well on your way:

<li class="tutorial_title {{}}" ng-click="loadFromMenu(tutorial)" ng-repeat="tutorial in section.tutorials">

Also, I think you may need to change

class="tutorial_title {{}}"

to something like

ng-class="tutorial_title {{}}"

See and look for ng-class.

Need Your Help

How to include all css kept in a directory?

html css

Is it possible to include multiple css at once in html? Or to be precise, is it possible to include all css placed in a directory, in one go?

Loop over array dimension in plpgsql

arrays postgresql multidimensional-array for-loop plpgsql

In plpgsql, I want to get the array contents one by one from a two dimension array.