Question: I want to repeat this code for each element in my array:

```
<div class="container" ng-init="parentIndex = $index" ng-repeat="urn in apsocket.mensajes | filter:searchTextURN">
  <button style="width:100%" type="button" class="btn btn-info" data-toggle="collapse" data-target="{{'#urn_'+$index}}">{{urn.urn }}</button>
  <div id="{{'urn_'+$index}}" class="collapse">
{{urn.timestamp}}
   <br>
    <p>
    <div align="right" ng-repeat="meas in urn.measurements track by $index">
      <button style="width:90%;background-color: #68ec6a;border-color:#8bf48c;" type="button" class="btn btn-success" data-toggle="collapse" data-target="{{'#meas_'+parentIndex + '_' +$index}}">{{meas.phenomenon}}    </button>
      <div style="width:90%" id="{{'meas_'+parentIndex + '_' +$index}}" class="collapse">
    {{meas.value + ' ' + meas.uom}}
  </div>
</div>
</p>

  </div>
</div>

```

But, while first button in each row works fine and creates a working collapsible, the inner ng-repeats seem not. 

Each inner element in each outter row, have the same id. So, for each "container", parentIndex is the same and starts in 0.

What should I do in this case? This is not a fixed array which I load at the beggining. This array recevies data from socket and it get bigger each time a message is received.

If you need any more code or so, just ask.

Answer: 
I would recommend just using the pure angular way. In a repeat, each item has it's own scope so you can do an ng-click="collapse = ! collapse" (something like that), I made you an example here 

<http://jsfiddle.net/X8era/82/>

I just made a fake data structure for examples sake

```
<ul>
       <li ng-repeat="item in objs" ng-click="collapse = ! collapse">
         {{item.id}}  
           <ul ng-show="item.more.length > 0 && collapse">
            <li ng-repeat="child in item.more" ng-click="collapse = ! collapse; $event.stopPropagation();" >
                {{child.id}}
                <ul ng-show="child.more.length > 0 && collapse">
            <li ng-repeat="baby in child.more">
                {{baby.id}}
               </li>
           </ul>
               </li>
           </ul>
        </li>
    </ul>

```

If you would like to use the collapse class for an animation or whatever, you can change the part of the ng-show that is collapse to

```
 ng-class="{ 'collapse' : collapse }"

```

The first 'collapse' being whatever class you want to be toggled.
You don't have to use `ng-init="parentIndex = $index"`. You can access to parent `$index` like this `$parent.$index`.  

Each `ng-repeat` creates **new** scope, that's why you can access to parent by using `$parent` keyword.

Demo:

```js
var app = angular.module('app',[]);
app.controller('ctrl', function($scope) {
  $scope.items = [0, 1, 2, 3, 4];
});
```

```html
<div ng-app="app" ng-controller="ctrl">
  <ul>
      <li ng-repeat="item in items track by $index">
          <ul>
              <li ng-repeat="item in items track by $index">
                  parent: {{$parent.$index}}
                  current: {{$index}}
              </li>
          </ul>
      </li>
  </ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
```