Angular+JQ+Bootstrap

by ken tsai

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.angularjs.org/1.2.12/angular.js"></script>
<div ng-controller="MyCtrl">
    <div ng-repeat="project in projects">
        <span ng-if="$index % 3 == 0">
            <hr />
            <div class="row">
                <h3 class="span4" ng-if="projects[$index+0]">{{projects[$index+0]}}</h3>
                <h3 class="span4" ng-if="projects[$index+1]">{{projects[$index+1]}}</h3>
                <h3 class="span4" ng-if="projects[$index+2]">{{projects[$index+2]}}</h3>
            </div
        </span>
    </div>
</div>

JavaScript

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

function MyCtrl($scope) {
    $scope.projects = ['Project A', 'Project B', 'Project C', 'Project D', 'Lab Title', 'Project E', 'Project F'];
}