Creating parent div inside ng-repeat

Question

I have 25 items from JSON string. Each item comes with a key called "InRowPlcement" and the value is assigned as "0" or "1" or "2" so on.

{"ItemID":"516","ItemName":"Newzeland Lake Tysonno","InRowPlcement":0},
{"ItemID":"514","ItemName":"Newzeland Lake Tysonno","InRowPlcement":0},
{"ItemID":"546","ItemName":"Underworld Lives","InRowPlcement":0},
{"ItemID":"527","ItemName":"In a holiday beach","InRowPlcement":1},
{"ItemID":"542","ItemName":"Underworld Lives","InRowPlcement":1},
{"ItemID":"525","ItemName":"Lake somewhere","InRowPlcement":1},
{"ItemID":"540","ItemName":"Coral Structure at Andaman","InRowPlcement":1},
{"ItemID":"569","ItemName":"Ice Rock, Ireland","InRowPlcement":2}

The intention is, placed the "0" "InRowPlacement" items in the first row, "1" in the second row, "2" in the third row and so on. The number of items may vary in each row. It may possible from 1 to 5 in a single row.

I started the ng-repeat

<div class="ROW" ng-repeat="item in items">
    <div class="COLUMN">{{item.ItemName}}<div>
</div>

I need the result should be like

    <div class="ROW">
        <div class="COLUMN">Newzeland Lake Tysonno<div>
        <div class="COLUMN">Newzeland Lake Tysonno<div>
        <div class="COLUMN">Underworld Lives<div>
    </div>
    <div class="ROW">
        <div class="COLUMN">In a holiday beach<div>
        <div class="COLUMN">Underworld Lives<div>
        <div class="COLUMN">Lake somewhere<div>
        <div class="COLUMN">Coral Structure at Andaman<div>
    </div>

Thanks in advance for your help.

SOLUTION UPDATE:

Based on the logic provided by @vp_arth, here is the actual code, which works for me

var view_rows = {};
angular.forEach(response.data, function(InRowPlcement,index){
    if (!view_rows[response.data[index].InRowPlcement]) view_rows[response.data[index].InRowPlcement] = [];
    view_rows[response.data[index].InRowPlcement].push(response.data[index]);

});
groups = view_rows;

Answer 1

This can be done with bunch of filters, but much better just prepare your data structure for view layer in the controller.

In your controller:

let data = [
{"ItemID":"516","ItemName":"Newzeland Lake Tysonno","InRowPlcement":0},
{"ItemID":"514","ItemName":"Newzeland Lake Tysonno","InRowPlcement":0},
{"ItemID":"546","ItemName":"Underworld Lives","InRowPlcement":0},
{"ItemID":"527","ItemName":"In a holiday beach","InRowPlcement":1},
{"ItemID":"542","ItemName":"Underworld Lives","InRowPlcement":1},
{"ItemID":"525","ItemName":"Lake somewhere","InRowPlcement":1},
{"ItemID":"540","ItemName":"Coral Structure at Andaman","InRowPlcement":1},
{"ItemID":"569","ItemName":"Ice Rock, Ireland","InRowPlcement":2}
];
let view_rows = {};
data.forEach(row => {
  if (!view_rows[row.InRowPlcment]) view_rows[row.InRowPlcment] = [];
  view_rows[row.InRowPlcment].push(row);
});
$scope.groups = view_rows;

Then, in view:

<div class="ROW" ng-repeat="(i, rows) in groups">
    <div class="COLUMN" ng-repeat="row in rows">{{row.ItemName}}<div>
</div>