how to bind 3 arrays simultaniously using angularjs - angularjs

Question

I tried using ng-repeat value,group1,group2
i'm getting
grp1
grp2
abc
def
value1
value2
I need
grp1
abc
valu1
grp2
def
valu1
Html:
<ul>
<li ng-repeat="heading in group1"> {{heading}} </li> // heading
<li ng-repeat="subheading in group2"> {{subheading }} </li> // sub heading
<li ng-repeat="val in value"> {{val}} </li> // value
</ul>
JavaScript:
$scope.group1 = [grp1,grp2];
$scope.group2 = [abc,def];
$scope.value = [value1,value2];

Answer 1

use $index to get other sub values
<div ng-repeat="eachval in group1">
<p>{{ eachval }}</p>
<p style="margin-left:15px">{{ group2[$index]}}</p>
<p style="margin-left:25px">{{ value[$index]}}</p>
</div>
Here is the WORKING FIDDLE

Answer 2

You should use a single array with three different keys
$scope.arrayList = [{group1Name : 'grp1',group2Name: 'abc', valueName: 'val1'},
{group1Name : 'grp2',group2Name: 'def', valueName: 'val2'}]
htlm would look like this
<li ng-repeat="group in arrayList">
<div>{{group.group1Name}}</div>
<div>{{group.group2Name}}</div>
<div>{{group.valueName}}</div>
</li>
You can write a simple javascript to modify your 3 arrays in 1 array.
Hope this helps

Answer 3

Use ng-repeat start and end points to iterate the first array, then use $index to reference the other elements:
<ul>
<li ng-repeat-start="heading in group1">{{heading}}</li> // heading
<li> {{group2[$index]}} </li> // sub heading
<li ng-repeat-end> {{val[$index]}} </li> // value
</ul>