Angular JS ng-repeat arranging in vertical split format

Question

I need to maks some modifications in the traditional way of viewing the angular js ng-repeat. I have a JSON data in which there are n number of data (response from server. Length is not fixed). I need to show the data in split format. i.e, the first half number of the response is to be in a div arranged vertically and the second set in an another div placed just next to that.

Like this

But currently what I have got is just as the usual JSON repeat

like this

How can I convert this format Like that I require?

Here is my code snippet.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <style>
        .container {
            width: 500px;
            border: 1px solid red;
            float: left;
        }
        
        .item {
            width: 50%;
            float: left;
            padding: 5px 0;
        }
        
    </style>
<body ng-app="myApp" ng-controller="myCtrl">

    <div class="container">
        <div class="item" ng-repeat="data in records">
            {{data.Data}}
        </div>
    </div>
    <script>
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function ($scope) {
            $scope.records = [{"Data": "Data1"}, {"Data": "Data2"}, {"Data": "Data3"}, {"Data": "Data4"}, 
                              {"Data": "Data5"}, {"Data": "Data6"}, {"Data": "Data7"}, {"Data": "Data8"}, 
                              {"Data": "Data9"}, {"Data": "Data10"}];
        });
    </script>

</body>

</html>

I wish to achieve this without modifying my JSON data. Thanks in advance.

Answer 1

This works, but I'm not sure how practical it is.

<div style="float:left">
    <div class="numberDiv" ng-repeat="num in data" ng-if="$index < data.length / 2">{{num}}</div>
</div>
<div style="float:left">
    <div class="numberDiv" ng-repeat="num in data" ng-if="$index >= data.length / 2">{{num}}</div>
</div>