Create Row every after 2 item in Angular ng-repeat - Ionic Grid

You can add flex-wrap: wrap to class row

http://jsfiddle.net/0momap0n/99/

<div ng-controller="MyCtrl">
    <div class="row" style="flex-wrap: wrap">
    <div class="col col-50" ng-repeat="number in numbers">{{number}}</div>
</div>  

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.numbers = [1, 2, 3, 4, 5, 6];
}

The solution from @Patrick Reck is excellent, but it forces you to repeat your code twice,

I suggest this improvement:

    <div ng-repeat="number in numbers">    
        <div class="row" ng-if="$even">
            <div class="col col-50" 
                 ng-repeat="num in [numbers[$index],numbers[$index + 1]]">
                {{num}}
            </div>
        </div>
    </div>

this way you will write your code one time as if it is a normal ng-repeat


I would write it like this, you can increase the $index % 3 to match the number of columns that you would like, this one will create 3 columns ...

<div class="row">
   <div class="" ng-repeat="i in range(1, 9)">
     <div class="clearfix" ng-if="$index % 3 == 0"></div>

       <div class="col">  
         <h1>{{ i }}</h1>
       </div>

     </div>
</div>

I managed to do it using $even.

<div ng-repeat="number in numbers">

    <div class="row" ng-if="$even">
        <div class="col col-50">{{numbers[$index]}}</div>
        <div class="col col-50">{{numbers[$index + 1]}}</div>
    </div>

</div>

Here's a working JSFiddle.