Nested ng-repeat in Angularjs displayed at the same level - angularjs

Question

I have a json which I'll be using to generate some html displaying tabs and buttons.
A simplified version of my json is this:
[{"id": "A","buttons":[{"id":"A1"},{"id":"A2"}]},
{"id": "B","buttons":[{"id":"B1"},{"id":"B2"}]}]
which I store in $scope.navigation as it is.
And, ideally I'd like to generate something like this:
<span id="tabs">
<div>A</div>
<div>B</div>
</span>
<span id="buttons">
<div>A1</div>
<div>A2</div>
<div>B1</div>
<div>B2</div>
</span>
What I tried is this
<span id="tabs">
<div ng-repeat="tab in navigation">{{tab.id}}</div>
</span>
<span id="buttons">
<span ng-repeat="tab in navigation">
<div ng-repeat="button in tab.buttons">{{button.id}}</div>
</span>
</span>
Of course this does not work as it creates an extra span element which separates the buttons depending to the tab they belong to.
Is there a way to do what I need?
Thanks!

Answer 1

What's the purpose of it? A < div> inside a < span> is considered bad practice and I'd advise you to change your CSS if appropriate. There may be a good reasoning for it though, but this question doesn't give enough details for an answer.
And coming to your above problem it can be achieved by creating another array consists of buttons like below.
$scope.navigation= [{ "id": "A", "buttons": [{ "id": "A1" }, { "id": "A2" }] },
{ "id": "B", "buttons": [{ "id": "B1" }, { "id": "B2" }] }];
$scope.buttons = [];
angular.forEach($scope.navigation, function (tab) {
angular.forEach(tab.buttons, function (button) {
$scope.buttons.push(button);
});
});
and finally use the ng-repeat like below.
<div> <div data-ng-repeat="button in buttons">{{button.id}}</div> </div>

Answer 2

You have to do a (key, value) repeat after the initial repeat in the span:
<span id="buttons" ng-repeat="i in buttons">
<div>{{i.id}}</div>
</span>
$scope.data = [{"id": "A","buttons":[{"id":"A1"},{"id":"A2"}]},
{"id": "B","buttons":[{"id":"B1"},{"id":"B2"}]}]
$scope.getButtons = function() {
$scope.buttons = []
for (var i = 0; i < $scope.data.length; i++) {
for(var x = 0; x < $scope.data[i].buttons.length; x++) {
$scope.buttons.push($scope.data[i].buttons[x])
}
}
console.log($scope.buttons)
}
$scope.getButtons();
I updated the plunker so that it flattens the buttons arrays all into one new array.
Plunker Demo