Add a few table cells with AngularJS - angularjs

Question

I am using Angular.js and ng-repeat directive for creating a table cells. I have array with object:
$scope.items = [{ name: 'item1', value: [{ val1: '1' }, { val2: '2' }] },
{ name: 'item2', value: [{ val1: '3' }, { val2: '4' }] ]
and here is my markup:
<tr ng-repeat="item in items" >
<td>{{item.name}}</td>
<td ng-repeat="another_item in item.value">{{another_item.val1 + another_item.val2}}</td>
</tr>
Can somebody explain me, why is the second construction with td generate two tags. How does this construction work with plus in this case: {{another_item.val1 + another_item.val2}}
Thank you.

Answer 1

ngRepeat iterates through the array and add the element it is in to the dom for every value.
In your case, iterating through items will add the following:
<tr ng-repeat="item1" >
<td>{{item1.name}}</td>
<td ng-repeat="another_item in item2.value">{{another_item.val1 + another_item.val2}}</td>
</tr>
<tr ng-repeat="item2" >
<td>{{item2.name}}</td>
<td ng-repeat="another_item in item2.value">{{another_item.val1 + another_item.val2}}</td>
</tr>
The inner ng-repeat does the same, so it becomes:
<tr ng-repeat="item1" >
<td>{{item1.name}}</td>
<td ng-repeat="firstIndex">{{firstIndex.val1 + firstIndex.val2}}</td>
<td ng-repeat="secondIndex">{{secondIndex.val1 + secondIndex.val2}}</td>
</tr>
<tr ng-repeat="item2" >
<td>{{item2.name}}</td>
<td ng-repeat="firstIndex">{{firstIndex.val1 + firstIndex.val2}}</td>
<td ng-repeat="secondIndex">{{secondIndex.val1 + secondIndex.val2}}</td>
</tr>
See why it does not work? Since firstIndex only has val1, fails to add with val2. Opposite for secondIndex.