Angular ng-repeat into 3 columns

The easy messy way.

by Gene Parcellano

HTML

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<div ng-controller="myController">
    <div class="row">
        <div class="col-sm-4">
            <div class="well">
                <div ng-repeat="person in people = data | limitTo:Math.ceil(data.length/3)">
                {{ person.name }}
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="well">
                <div ng-repeat="person in people = data | limitTo:Math.ceil(data.length/3):Math.ceil(data.length/3)">
                {{ person.name }}
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="well">
                <div ng-repeat="person in people = data | limitTo:Math.ceil(data.length/3):Math.ceil(data.length/3)*2">
                {{ person.name }}
                </div>
            </div>
        </div>
    </div>
</div>

JavaScript

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

app.controller('myController', function($scope) {
    
	$scope.Math = Math;
	$scope.data = [
        {"name":"Person A"},
        {"name":"Person B"},
        {"name":"Person C"},
        {"name":"Person D"},
        {"name":"Person E"},
        {"name":"Person F"},
        {"name":"Person G"},
        {"name":"Person H"},
        {"name":"Person I"},
        {"name":"Person J"},
        {"name":"Person K"},
        {"name":"Person L"},
        {"name":"Person M"},
        {"name":"Person N"},
        {"name":"Person O"},
        {"name":"Person P"},
        {"name":"Person Q"}
    ];
});