Define Bootstrap columns with AngularJS

Question

I would like to define 4 different outputs. In my HTML I want to say how many columns I would like to show, then in JavaScript I would run this code if there are 4 columns:

<div class="col-md-3">
    <h1>Content</h1>
</div>
<div class="col-md-3">
    <h1>Content</h1>
</div>
<div class="col-md-3">
    <h1>Content</h1>
</div>
<div class="col-md-3">
    <h1>Content</h1>
</div>

Run this code if there are 3 columns:

<div class="col-md-4">
    <h1>Content</h1>
</div>
<div class="col-md-4">
    <h1>Content</h1>
</div>
<div class="col-md-4">
    <h1>Content</h1>
</div>

Run this code if there 2 columns:

<div class="col-md-6">
    <h1>Content</h1>
</div>
<div class="col-md-6">
    <h1>Content</h1>
</div>

Run this code if there is 1 column:

<div class="col-md-12">
    <h1>Content</h1>
</div>

Is there a way doing this with AngularJS?

Answer 1

Can you try this:

NG:

$scope.number = 4;//your column count 
$scope.getNumber = function(num) {
    return new Array(num);   
}

Html:

<div ng-repeat="i in getNumber(number) track by $index" class="col-sm-{{12/number}}">
     <h1>Content</h1>
</div>

http://jsfiddle.net/3ck8vb1s/1/