title: Ionic Framework: GridLayout with multiple rows and column on which buttons placed for an arrayItem
body: <p>On a page, using ng-repeat, I try to place buttons on a grid layout. 
  Iterating through an array which is defined in a controller $scope.btnNames[]. buttons are place on  Total number of buttons equal to array size of  $scope.btnNames[]</p>
  
  <p>I would like to put say 4 buttons per row.
  As $scope.btnNames[] size is 20, then I like to place 20 buttons on 5 rows, 
  where each row will have 4  buttons.</p>
  
  <p>1) on Controller :
  - I have an array with button names 
     $scope.btnNames['aa', 'bb', 'cc','dd', 'ee', 'ff'....] whose size is 20.  </p>
  
  <p>2) on the page:
  - using ng-repeat, iterate throught the<br>
     $scope.btnNames[] and put buttons as per follwoing code</p>
  
  <pre><code>&lt;body ng-controller="PopupCtrl"&gt;
   &lt;div class="row responsive-sm"&gt; 
      &lt;div ng-repeat="btnName in btnNames"&gt; 
         &lt;button id={{$index}} class="button button-dark col" &gt;{{btnName}}&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Please help me defining class="row" and class="col" and such a way that,
  during ng-repate, after 4th button, it should add a new row and place 4 buttons till it reach end of ng-repeat.</p>
  
  <p>Being new to both ionic and angulrJs, I'm not able to define class="row" during ng-repeat ( similar like a for loop, where, put a new class="row", when iterator counter in this case {{index}} greater than 4. </p>