displaying bootstrap thumbnails in angularjs

Question

I have a simple angularjs app with a simple array in a controller.

(function () {
"use strict";
angular.module('stylistFormulas').controller('ServiceTypesCtrl', ServiceTypesCtrl);

function ServiceTypesCtrl() {
    var vm = this;
    vm.serviceTypes = [
        {
            "text": "Retouch",
            "image": "serviceTypes/images/Retouch.jpg",
            "id": "retouch"
        },

        {
            "text": "All Over",
            "image": "serviceTypes/images/AllOver.jpg",
            "id": "allover"
        },
         {
             "text": "Highlights/Lowlights",
             "image": "serviceTypes/images/Highlight.jpg",
             "id": "highlight"
         },

        {
            "text": "Ombre, Balayage, Sombre",
            "image": "serviceTypes/images/Balayage.jpg",
            "id": "ombre"
        }

    ]
};
}());

I want to display these records similar to bootstraps thumbnail, custom content example but using bootstraps grid with two columns for larger screens and 1 for xs.

i.e.

image                    image
Title of Image           Title of image

image                    image
Title of Image           Title of image

image        
Title of Image       

I have tried numerous examples I have found on the web with no luck. I usually get just one column or nothing but the layout without the data.

My latest attempt...

<div ng-repeat="serviceType in vm.serviceTypes">
<div class="row | $index % 3 == 0">
    <div class="col-sm-6">
        <div class="thumbnail">
            <img ng-src="{{serviceType.image}}" />
            <div class="caption">
                <h3>{{serviceType.text}}</h3>
            </div>
        </div>
    </div>
</div>
</div>

How can I display this data using the ng-repeat or something else?

Thanks

Answer 1

<div class="row | $index % 3 == 0"> instead

can you try with

<div ng-class="row | $index % 3 == 0">

Because you cant do manipulations inside a HTML attribute.