how to use ng-repeat in columns in angular?

Question

I am trying to make one demo in which i have one checkbox list .I am able to display the list using ng-repeat .

But I am tying to generate dynamic columns ..I know bootstrap grid system (12 column logic)..I also know xs generate automatically width .

What I need if user click on one check box(only one checkbox is checked) .it display only one columns (100%) width .Which user checked two column it display two columns of equal width (50%).if user check three column it show three column of equal width ..As as if user checked four checkbox it show four column of equal width

here is my code http://codepen.io/anon/pen/VemNpo?editors=101

 this.checkBoxClick=function(obj){
    this.count=0;
    obj.checked=true;
    console.log(this.data);
    var len=this.data.length;
   for(var i=0;i<len;i++){
     var checked =this.data[i].checked;
     if(checked){
       this.count++;
     }
   }
    alert(this.count)
  }

here is i am trying to display

<!-- equal width columns -->

<div class='container-fluid'>
  <div class='row'>
  <div class='col-xs-2'>
    hi
    </div>
  </div>
</div>

any update..?

Answer 1

Ok so here you have 2 steps for the solution, for the css/class part which manipulates the width of the column it can be done as the following:

<div class='container-fluid'>
  <div class='row'>
    <div class='col-xs-{{12/count}}'>
      hi
    </div>
  </div>
</div>

where count is the one you have the number of checked boxes in. The second part is to repeat the column according to the count, which by using the answer here you can achieve by the following code:

<div class='container-fluid'>
  <div class='row'>
    <div ng-repeat="i in vm.selectedList" class='col-xs-{{12/vm.selectedList.length}}'>
      hi
    </div>
  </div>
</div>

Working example: http://codepen.io/anon/pen/QyGPmq