Set dynamic id with $index - html

Question

I've got this code:
My list, wich should work like a navigation with main nav points and sub nav poins:
list = [
{
Id: 1,
Name: 'Main 1',
Items: [
{
Id: 1,
Name: 'Sub 1'
},
{
Id: 2,
Name: 'Sub 2'
}
]
},
{
Id: 2,
Name: 'Main 2',
Items: [
{
Id: 1,
Name: 'Sub 1'
},
{
Id: 2,
Name: 'Sub 2'
}
]
}
];
And this is my HTML. I loop the main poins and it's sub points with ng-repeat and try to set some id's dynamicly with the $index.:
<div class="wrapper" ng-repeat="item in list">
<div id="main_{{$index}}">{{item.Name}}</div>
<div id="main_{{$parent.$index}}_sub_{{$index}}" ng-repeat="sub in item.Items">
<div>— {{sub.Name}}</div>
</div>
</div>
My result is something like this and it works fine:
Main 1
- Sub 1
- Sub 2
Main 2
- Sub 1
- Sub 2
My goal is now to assign a id to my div with the main and my div with the subs. I add the current index with $index to my id in the main div and after that I try to combine the id for the sub divs with the index from the main (it's parent) and the current index. To get the index of the parent, I used $parent.$index. My expected result are follow id's:
Main 1 -> id = main_0
- Sub 1 -> id = main_0_sub_0
- Sub 2 -> id = main_0_sub_1
Main 2 -> id = main_1
- Sub 1 -> id = main_1_sub_0
- Sub 2 -> id = main_1_sub_1
But this doesn't work at the moment. The id's for the main div is correct, but the id for the sub isn't. I thought with $parent.$index it should work, but there is a problem with the current index of the main. I have no idea how to solve this. I hope someone can help me.

Answer 1

Try the below code snippet, it's working fine here !
var app = angular.module('app',[]);
app.controller('Ctrl',function($scope){
$scope.list = [
{
Id: 1,
Name: 'Main 1',
Items: [
{
Id: 1,
Name: 'Sub 1'
},
{
Id: 2,
Name: 'Sub 2'
}
]
},
{
Id: 2,
Name: 'Main 2',
Items: [
{
Id: 1,
Name: 'Sub 1'
},
{
Id: 2,
Name: 'Sub 2'
}
]
}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl">
<div class="wrapper" ng-repeat="item in list">
<div id="main_{{$index}}">{{item.Name}} - main_{{$index}}</div>
<div id="main_{{$parent.$index}}_sub_{{$index}}" ng-repeat="sub in item.Items">
<div>— {{sub.Name}} - main_{{$parent.$index}}_sub_{{$index}}</div>
</div>
</div>
</div>

Answer 2

I notice that what you want is have the $index-1. Try this:
<div class="wrapper" ng-repeat="item in list">
<div id="main_{{$index-1}}">{{item.Name}}</div>
<div id="main_{{$parent.$index-1}}_sub_{{$index-1}}" ng-repeat="sub in item.Items>
<div>— {{sub.Name}}</div>
</div>
</div>