title: Angular JS ng-repeat arranging in vertical split format
body: <p>I need to maks some modifications in the traditional way of viewing the <code>angular js</code> <code>ng-repeat</code>. 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.</p>
  <p>Like this</p>
  <p><a href="https://i.stack.imgur.com/lKiBz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lKiBz.png" alt="enter image description here" /></a></p>
  <p>But currently what I have got is just as the usual JSON repeat</p>
  <p>like this</p>
  <p><a href="https://i.stack.imgur.com/OqsVX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OqsVX.png" alt="enter image description here" /></a></p>
  <p>How can I convert this format Like that I require?</p>
  <p>Here is my code snippet.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"&gt;&lt;/script&gt;
      &lt;style&gt;
          .container {
              width: 500px;
              border: 1px solid red;
              float: left;
          }
          
          .item {
              width: 50%;
              float: left;
              padding: 5px 0;
          }
          
      &lt;/style&gt;
  &lt;body ng-app="myApp" ng-controller="myCtrl"&gt;
  
      &lt;div class="container"&gt;
          &lt;div class="item" ng-repeat="data in records"&gt;
              {{data.Data}}
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script&gt;
          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"}];
          });
      &lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I wish to achieve this without modifying my JSON data.
  Thanks in advance.</p>