how to create a nested grid in ngtable? - angularjs

Question

I am trying to create a nested grid in my ngtable like this:
<table ng-table="tableParams" class="table">
<tr ng-repeat="user in $data">
<td data-title="'Name'">{{user.name}}</td>
<td data-title="'Age'">{{user.age}}</td>
<td data-title="'kids'">
<table ng-table="nestedtableParams" class="table">
<tr ng-repeat="nesteduser in $nesteddata">
<td data-title="'Name'">{{nesteduser.name}}</td>
<td data-title="'Age'">{{nesteduser.age}}</td>
</tr>
</table>
</td>
</tr>
</table>
question is: why is the nested data not displaying? here is a plunkr:
http://plnkr.co/edit/dKTtU89f7z6nQptgEZxN?p=preview

Answer 1

Got this working by adding the data to the $scope: (partial example code)
$scope.nesteddata = [{
name: "Kid Moroni",
age: 50
}, {
name: "Kid Tiancum",
age: 43
}, {
name: "Kid Jacob",
age: 27
}, {
name: "Kid Nephi",
age: 29
}, {
name: "Kid Enos",
age: 34
}];
And then, in the controller functions, refer to these $scope variables:
$scope.nestedtableParams = new ngTableParams({
page: 1, // show first page
count: 10 // count per page
}, {
total: $scope.nesteddata.length, // length of data
getData: function($defer, params) {
$defer.resolve($scope.nesteddata.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
Finally in the markup I left out the $ prefix, since this data is now in the scope:
<table ng-table="tableParams" class="table">
<tr ng-repeat="user in data">
<td data-title="'Name'">{{user.name}}</td>
<td data-title="'Age'">{{user.age}}</td>
<td>
<table ng-table="nestedtableParams" class="table">
<tr ng-repeat="user in nesteddata">
<td data-title="'Name'">{{user.name}}</td>
<td data-title="'Age'">{{user.age}}</td>
</tr>
</table>
</td>
</tr>
</table>
Working Plunker (Although I doubt that it makes sense to nest grids like this)