Placing thumbnails inside of tabs - html

Question

I am using angularjs to render my html and using bootstrap 3 to style it. The tabs render correctly, but the images within each tab do not display in a grid, rather, they are outputted one by one in a single column. What am I doing wrong?
<div class="col-sm-12">
<!--Nav Tabs-->
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="{{'#' + retailProducts[0].Category}}"
role="tab" data-toggle="tab">
{{retailProducts[0].Category}}
</a></li>
<li ng-repeat="pro in retailProductsMinusFirst">
<a href="{{'#' + pro.Category}}" role="tab" data-toggle="tab">
{{pro.Category}}
</a>
</li>
</ul>
<!--Tab Panes-->
<div class="tab-content">
<div class="tab-pane active" id="{{retailProducts[0].Category}}">
<div class="row">
<div class="col-sm-2">
<a ng-repeat="pro in retailProducts[0].Products" href="#"
class="thumbnail">
<img src="{{pro.Product.PrimaryPhotoUrl + '?height=100'}}"
alt="Product Photo" />
</a>
</div>
</div>
</div>
<div ng-repeat="pro in retailProductsMinusFirst" class="tab-pane"
id="{{pro.Category}}">
<div class="row">
<div class="col-sm-2">
<a ng-repeat="img in pro.Products" href="#" class="thumbnail">
<img src="{{img.Product.PrimaryPhotoUrl + '?height=100'}}"
alt="Product Photo" />
</a>
</div>
</div>
</div>
</div>
</div>

Answer 1

You're repeating the anchors. You need to repeat the column divs. Something like this:
<div ng-repeat="pro in retailProducts[0].Products" class="col-sm-2">
<a href="#" class="thumbnail">
<img src="{{pro.Product.PrimaryPhotoUrl + '?height=100'}}"
alt="Product Photo" />
</a>
</div>