<!DOCTYPE html>
<html ng-app="example">
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="container" ng-controller="ExampleController as exampleVm">
<div class="row" ng-repeat="chunk in exampleVm.projects| orderBy: 'title' | groupBy : 3">
<div class="col-sm-4" ng-repeat="project in chunk">
{{project.title}}
</div>
</div>
</div>
</body>
</html>
// Code goes here
(function() {
'use strict';
angular
.module('example',['angular.filter'])
.controller('ExampleController',ExampleController);
function ExampleController() {
var exampleVm = this;
exampleVm.projects = [{"title":"Z"},{"title":"A"},{"title":"M"},
{"title":"Z"},{"title":"A"},{"title":"M"},{"title":"Z"},{"title":"A"},{"title":"M"},
{"title":"Z"},{"title":"A"},{"title":"M"}];
}
})();
/* Styles go here */