Bootstrap grid carousel slider using angular Js - angularjs

Question

I have approximately 20 results. I want to show 2 rows each with 4 grids in tablet mode and I want to slide the grids from left to right (carousel). How do I do this using AngularJS?
<div class="margin-25">
<div ng-repeat="customer in customerData" class="col-sm-3">
<div class="well">
<a href="profile.html">
<div class="col-sm-4">
<div class="text-center">
<img src="../app/imgs/photo.jpg" width="50" height="50" class="img-circle m-t-xs img-responsive" alt="image">
<div class="m-t-xs font-bold">{{customer.customerName}}</div>
</div>
</div>
<div class="col-sm-8">
<h4><strong>{{customer.CustomerNumber}}</strong></h4>
<address>
{{customer.branch.address}}<br>
{{customer.branch.city}}<br>
</address>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
</div>
Can anybody suggest the best examples or an any approach to do this?

Answer 1

This may not be the prettiest way to do but this is generating slides dynamically now regardless of the size of the customerData. I used a filter from This Post to keep track of the customers as the slide changes.
<carousel interval="myInterval" no-wrap="noWrapSlides">
<slide active="slide.active" ng-repeat="slide in customerData | limitTo: slideLength track by $index">
<div class="col-sm-3" ng-repeat="customer in customerData | startFrom: ($index*8) | limitTo: 8">
<div class="well">
<a href="profile.html">
<div class="col-sm-4">
<div class="text-center">
<img src="http://placehold.it/150x150.gif" width="50" height="50" class="img-circle m-t-xs img-responsive" alt="image">
<div class="m-t-xs font-bold">{{customer.customerName}}</div>
</div>
</div>
<div class="col-sm-8">
<h4><strong>{{customer.CustomerNumber}}</strong></h4>
<address>
{{customer.branch.address}}<br>
{{customer.branch.city}}<br>
</address>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
</slide>
</carousel>
angular.module('demoApp', ['ngAnimate', 'ui.bootstrap'])
.filter('startFrom', function() {
return function(input, start) {
if(input) {
start = +start; //parse to int
return input.slice(start);
}
return [];
}
})
.controller('DemoApp', ['$scope', function ($scope) {
$scope.slideLength = Math.ceil($scope.customerData.length / 8); // place this after your model has been declared