JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div ng-app="SampleApp">
    <div ng-controller="SampleController">
        <div class="row" data-ng-init="genDummyArrays()">
            <div class="col-xs-6">
                <div ng-repeat="evenname in evenarray">{{evenname}}</div>
            </div>
            <div class="col-xs-6">
                <div ng-repeat="oddname in oddarray">{{oddname}}</div>
            </div>
        </div>
    </div>
</div>

JavaScript

var app = angular.module('SampleApp', []);

app.controller('SampleController', function ($scope) {
    $scope.evenarray = [];
    $scope.oddarray = [];
    $scope.names = ['John', 'Mary', 'Cate', 'Suz'];
    $scope.start = 0;
    $scope.genDummyArrays = function () {
        for ($scope.start = 0; $scope.start < $scope.names.length; $scope.start++) {
            if (($scope.start) % 2 == 0) {
                $scope.evenarray.push($scope.names[$scope.start]);
            } else if (($scope.start) % 2 == 1) {
                $scope.oddarray.push($scope.names[$scope.start]);
            }
        }
    }
});