Binding nested array in Angular view - angularjs

Question

I am having difficulty binding nested array using ng-Repeat. Is there a way I can bind complex array object to view.
Scope in directive holds object.
(directive controller is as - controllerAs: 'srCtrl')
var vm = this;
vm.resultCategories = [[{"id":3,"name":"name3","desc":"2","categoryId":1,"categoryName":"cat 1"},
{"id":1,"name":"name1","desc":"2","categoryId":1,"categoryName":"cat 1"},
{"id":2,"name":"name2","desc":"2","categoryId":1,"categoryName":"cat 1"}],
[{"id":4,"name":"name4","desc":"name1","categoryId":2,"categoryName":"cat 2"},
{"id":2,"name":"name2","desc":"2","categoryId":2,"categoryName":"cat 2"}]];
Binding directive view
<ul>
<li ng-repeat="category in srCtrl.resultCategories">
<h3>{{category.categoryName}}</h3>
</li>
</ul>
Any help is appreciated. Many thanks in advance.

Answer 1

The best solution is to concat all the arrays using a reduce function and a concat function before you serve it up to a ui. You can either do this through a filter or just within the controller upon receiving the data:
vm.resultCategories = vm.resultCategories.reduce(function(last,next){
return last.concat(next);
})
Note there are ways to add nested ng-repeat, but this is not advised for a variety of reasons:
you are using list items, it would mean you need to create divs to put them together (this could affect your css and overall structure)
confusing as hell!
room for potential error
edit:
Another way you achieve this(with less lines) is to use:
vm.resultCategories = new Array(vm.resultCategories.join());
Note: Although this method is shorter, it actually takes longer to run since the cpu is creating a 'new' array each time.