Filling Multiple Columns in Bootstrap Using AngularJS

A few days ago I was working on my side project which is built using AngularJS and Bootstrap. I wanted to fill two columns with some data from the controller. At the beginning, I thought that this will be easy, some kind of integrated stuff, but it wasn't.

So here's the problem: we have a web page, written using Bootstrap and AngularJS. There we have a two columns and they need to be filled with person's name and age:

How do we achieve that?

We have a controller which contains array of 'persons' filled with objects:

 readItApp.controller('ColumnsCtrl', function($scope){
    $scope.persons = [
        {'name': 'John',
            'age': '35'},
        {'name': 'Peter',
            'age': '14'},
        {'name': 'Amanda',
            'age': '23'},
        {'name': 'Joseph',
            'age': '17'},
        {'name': 'Juliet',
            'age': '2'}
    ]
 });

In index.html we have two columns:

<div ng-controller="ColumnsCtrl" class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-4 col-sm-offset-1">
            <button class="btn btn-info btn-lg btn-block"><span class="badge"></span>
            </button>
        </div>
        <div class="col-xs-12 col-sm-4 col-sm-offset-2">
            <button class="btn btn-success btn-lg btn-block"><span class="badge"></span></button>
        </div>
    </div>
</div>

It's nothing hard to fill one column using the ng-repeat directive, but at this point we have two. If we would use ng-repeat without any tweaks, we would get the same person printed in the first and the second columns.

Solution is quite simple:

<div ng-controller="ColumnsCtrl" class="container">
    <div class="row" ng-repeat="person in persons" ng-if="$index % 2 == 0">
        <div class="col-xs-12 col-sm-4 col-sm-offset-1">
            <button class="btn btn-info btn-lg btn-block">{{persons[$index].name}} <span class="badge">{{persons[$index].age}}</span>
            </button>
        </div>
        <div class="col-xs-12 col-sm-4 col-sm-offset-2">
            <button class="btn btn-success btn-lg btn-block" ng-if="persons[$index + 1].name != null">{{persons[$index +
                1].name}} <span class="badge">{{persons[$index + 1].age}}</span></button>
        </div>
    </div>
</div>

We need to use the $index, which indicates a current position of 'persons' array in ng-repeat. At this point, when loop goes to the second column, need to add 1 to the $index. This way we will get the next element from the array.

But that's not all. If we would leave like that, we would get duplicated data to columns as well, because the person we got using $index + 1 would be repeated during next loop in the first column. To avoid that, need to introduce ng-if="$index % 2 == 0"

<div class="row" ng-repeat="person in persons" ng-if="$index % 2 == 0">

Which means, that if $index is not even skip everything and move to another object in the array.

P.S. Notice line in the second column

When the last array element is printed in the first column we need to skip the second column otherwise it would be empty. This is used to avoid such situations.

P.S.S. This method can be used with more than two columns. The most important thing, that the $index which starts filling the first column in the loop would divide without residue from the total number of columns.  E.g. for three columns:

ng-if="$index % 3 == 0

Full example: GitHub