directive.js

angular.module("demoApp", [])
	.directive("productContainer", function(){
		return{
			scope:{
				data: "="
			},
			templateUrl: "productsTemplate.html",
			link: function(scope, el, attr){
			  // splitSize 表示每列有幾個 product
				scope.splitSize = parseInt(attr["splitSize"]);
			},
			restrict: "AE"
		};
	}).directive("productRow", function(){
		return{
			scope: {},
			templateUrl: "productRowTemplate.html", 
			link: function(scope, el, attr){
				scope.data = scope.$eval(attr.rowData);
			},
			restrict: "E"
		};
	});

index.html

<div ng-controller="ProductController" class="col-md-offset-4 col-md-4">
	<product-container data="products" split-size="3"></product-container>
</div>

productRowTemplate.html

<div class='col-md-4' ng-repeat='product in data'>
	<div class='well'>
		{{product.name}}
	</div>
</div>

productsTemplate.html

<div ng-repeat='product in data' 
     ng-init="remainder= $index % splitSize; match= remainder == splitSize-1;">
	<div class='row' ng-if='match' ng-init="data= data.slice($index-(splitSize-1), $index+1)">
		<product-row row-data="{{data}}"></product-row>
	</div>
	<div class='row' ng-if='$last && !match' ng-init="data= data.slice($index-remainder, $index+1)">
		<product-row row-data="{{data}}"></product-row>
	</div>
</div>