Printing multiple ng-repeat elements in a single row - angularjs-ng-repeat

Question

I have a list of item and ng-repeat display them in the page. Below is the simplified structure -
[
{
"id": "elem-1",
"position": {
"row": 1,
"column": 1
}
},
{
"id": "elem-2",
"position": {
"row": 2,
"column": 1
}
},
{
"id": "elem-3",
"position": {
"row": 2,
"column": 2
}
}
]
Now elem-1 should come in first row, while the second row should have elem-2 and elem-3, side-by-side. I have checked ng-repeat-start and also gone through the existing similar topics in Stack overflow but not sure how to do this. This is my HTML template
<div layout="row" ng-repeat="item in inputElemAll">
<div ng-if="if the current row has 1 column">
<md-input-container class="md-block">
<!-- Print the element-->
</md-input-container>
</div>
<div ng-if="if current row has more than 1 column">
<md-input-container class="md-block" flex="33">
<!-- Print the element-->
</md-input-container>
</div>
</div>
All I'm trying here is to add a flex attribute in case I have to show more columns in a single row. But the problem is, with every ng-repeat a new <div> with "row" layout is started and I'm stuck here. Not sure how to access multiple ng-repeat elements and also be on the same <div> simultaneously.
P.S. I use material layout, in case you are interested.

Answer 1

I am assuming that you wanna show your array like a table and maximum rows/columns are not greater than length of your array. You have to use two loops with ng-repeat, first one is for all rows and seconds one is for columns. also use 'orderBy' to sort. I mixed your json array and the result is as expected:
<div layout="row" ng-repeat="row in inputElemAll">
<div ng-repeat="item in inputElemAll | orderBy:'position.column'">
<div ng-if="$parent.$index==item.position.row-1">
<md-input-container class="md-block">
{{item.id}}
</md-input-container>
</div>
</div>
</div>
Check this jsFiddle working example:
http://jsfiddle.net/hd1by95r/47/