in Angularjs {{$index}} loop only once insted of loop everytime - angularjs

Question

in Angularjs {{$index}} loop only once insted of loop everytime
<div ng-repeat="(key, value) in reports" class="all_report_admin">
<div class="name">{{key}}</div>
<div ng-repeat="data in value" class="all_report">
<div class="date">{{$index+1}}</div>
<div class="status">{{data.status}}</div>
</div>
</div>
How to restrict that

Answer 1

try ng-repeat="data in value[0]" instead of your ng-repeat

Answer 2

There is no easy combination that will give you such index (also known as a counter). It might look similar to how a one-dimensional array can be indexed with two-dimensional rows and columns, with [column + row * columns] formula (potentially {{$index + $parent.$index * reports[key].length}}). However, your reports can have an arbitrary number of object properties and arrays. So you need a manual counter in your controller.
I came up with this simple thing:
$scope.array = [];
var counter = 0;
for(key in $scope.reports){ // for every object
var temp = []; // row array
for(var j=0; j<$scope.reports[key].length; j++){
counter++;
temp.push(counter); // column element (counter)
}
$scope.array.push(temp);
}
Then it's enough to display it with {{array[$parent.$index][$index]}} in your inner ng-repeat
Here is a demo:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.reports = {
"My reports 1":[
{"status":"status1"},
{"status":"status2"},
{"status":"status3"}
],
"My reports 2":[
{"status":"status1"},
{"status":"status2"},
{"status":"status3"},
{"status":"status4"},
],
"My reports 3":[
{"status":"status1"},
{"status":"status2"},
],
"My reports 4":[
{"status":"status1"},
{"status":"status2"},
{"status":"status3"},
]
};
$scope.array = [];
var counter = 0;
for (key in $scope.reports) { // for every object
var temp = [];
for (var j = 0; j < $scope.reports[key].length; j++) {
counter++;
temp.push(counter);
}
$scope.array.push(temp);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="(key, value) in reports">
<div>{{key}}</div>
<div ng-repeat="data in value">
<strong>INDEX: {{array[$parent.$index][$index]}}</strong>
<div>{{data.status}}</div>
</div>
<hr>
</div>
</div>