AngularJS: ng-repeat-start does not work with ng-init

Question

I am using ng-repeat-start / ng-repeat-end and working with $index when necessary, but i would like to use ng-init="someName = $index" and work with "someName" to have clearer code and not mix it up in nested ng-repeats.

It works perfectly with ng-repeat, but doing this in an ng-repeat-start fails.

Is this an angularjs issue? Why is it not working there?

This is the code (i am also using bootstrap):

<div class="col-md-3" ng-repeat-start="item in items" ng-init="myIndex = $index" ng-if="myIndex%3==0">
  <p>Introduction text for each row</p>
</div>
<div class="col-md-3">
  <h1>{{ item.name }}</h1>
  <h2>{{ item.description }}</h2>
</div>
<hr class="col-md-12" ng-repeat-end ng-if="myIndex%3==2">

I would like to have something like this:

"intro text" ["first element" "second element" "third element"]

---

"intro text" ["fourth element" "fifth element" "sixth element"]

---

"intro text" ["seventh element" "eighth element" "ninth element"]

---

When using myIndex, the first div with the text and the hr never show up, but just with $index it will work fine

The angular version is 1.4.9

Answer 1

Use your ng-if inside $index values instead of main <div>,

<div class="col-md-3" ng-if="myIndex%3==0">
  <h1>{{ item.name }}</h1>
  <h2>{{ item.desc }}</h2>
</div>

check out this Jsfiddle ...