Q:

Is there a way to change the col-md class dependent on the number of elements in Angular?

I want to auto adjust bootstrap cols, what i mean by "Auto Adjust"  is to dynamically create the grid depending on the number of elements to display, I've got the following html:
<div class="vertical-center">
    <div class="dashboard-options row panel">

        <div class="panel-heading">
            Menu
        </div>
        <div class="panel-body">
            <!-- The followig <a> element is generated automatically using angular ng-repeat 
                 This is an Angular Directive in fact, so that it's used in all the dashboards,
                 There are a lot of dashboards, and each has different amount of options,
                 This <a> element is setup to take 4 columns of the row, but sometimes there are
                 More than 3 <a> elements so a new row is generated, thats what i don't want -->
            <a href="somewhere" class="col-md-4">
                <div class="dashboard-option button-effect text-center">
                    <i class="fa fa-something"></i>
                    <p>Some Text</p>
                </div>
            </a>
        </div>

    </div>
</div>

I'm using angular directives and ng-repeat to generate the html, this is the directive:
<a href="somewhere" class="col-md-4">
    <div class="dashboard-option button-effect text-center">
        <i class="fa fa-something"></i>
        <p>Some Text</p>
    </div>
</a>

As you can see it has a col-md-4 class which means that only 3 elements fit in a row, what i would like is that, no matter how many elements (They're always between 2 and 5), the elements could fit in a single row, wherther they are 2 or 5 they should fit in a single row, if they are 4 elements the <a> class should be col-md-3, if they are 2 elements class <a> should be col-md-6 and so on.
As i'm using AngularJS, is there a way to do it the angular way? I would use it on several views that has different Ctrls so if its possible i would to keep code DRY.

A:

Keep it simple, use ng-class and some method to figure out what class to use based on the number of elements. 
<div ng-class="vm.getClass()" />

Update:
In order to keep it dry, you could also use a custom directive, and instead of using ng-class set the required classes manually. Something like this:
(function() {
'use strict';

function bootstrapRow () {

    var directive = {
        link: link,
        restrict: 'A',
        scope : {
            bootstrapRow : '='
        }
    };
    return directive;

    function link(scope, element, attrs) {
        scope.$watch('bootstrapRow', function(noElements){
            if(noElements){
                //reset
                element.removeClass('col-md-6');
                element.removeClass('col-md-4');
                element.removeClass('col-md-3');
                element.removeClass('col-md-2');

                console.log(noElements);
                switch(parseInt(noElements)){
                    case 2:
                        element.addClass('col-md-6');break;
                    case 3:
                        element.addClass('col-md-4');break;
                    case 4:
                        element.addClass('col-md-3');break;
                    case 5:
                        element.addClass('col-md-2');break; // this probably needs some work
                }
            }
        });            
    }
}

angular
    .module('app')
    .directive('bootstrapRow', bootstrapRow);

})();

and you can use it like so:
<div bootstrap-row="vm.rowCount"></div>

