Creating check box grid using ng-repeat - angularjs

Question

The Json structure,
[
{
"name": "module1",
"categories": [
{
"name": "cat1"
},
{
"name": "cat4"
}
]
},
{
"name": "module2",
"categories": [
{
"name": "cat3"
},
{
"name": "cat4"
}
]
},
{
"name": "module3",
"categories": [
{
"name": "cat1"
},
{
"name": "cat2"
},
{
"name": "cat4"
}
]
}
]
Using this Json structure, I need to display a grid of checkboxes as follows,
On click of any checkbox, I should be able to alert the corresponding category & module name. If each module has all four categories then I can easily use nested ng-repeat and display the structure (You can check it here. ). But here the number of categories differs for each module. Could you please suggest a way to implement this functionality?
Need to find the number of categories first and display it as the headers in the table
Display checkbox exactly at the right place

Answer 1

It is possible to have an ng-repeat iterate over the result of a function - in contrast to an array field in the scope - like this:
<tr ng-repeat="module in getAllModules()">
<td ng-repeat="cat in getAllCategories()">
<!-- display checkbox here if required -->
</td>
</tr>
I think it should be clear how to implement the two methods. However, you have to consider the performance overhead involved because the total set of modules and categories is calculated over and over again.

Answer 2

I think lex answer is corrrect. If I understood his solution right,the getAllCategories method is the interesting part. It has to return ALL categories, while getAllModules can still return your modules Array.
<tr ng-repeat="module in modules">
<td ng-repeat="cat in getAllCategories()">
<input type="check" ng-if="module.containsCat(cat)">
</td>
</tr>
with the containsCat method being something like
$scope.containsCat = function(module, cat){
for each(var moduleCat in module.categories ){
if(moduleCat.name === cat) return true;
}
return false;
}