Sorting in ng-repeat with row after every 4th column

Question

To create a grid of items with 4 products max per row, we can do the following:

<div ng-repeat="product in products" ng-if="$index % 4 == 0" class="row">
    <div class="col-xs-4">{{products[$index]}}</div>
    <div class="col-xs-4">{{products[$index + 1]}}</div>
    <div class="col-xs-4">{{products[$index + 2]}}</div>
    <div class="col-xs-4">{{products[$index + 3]}}</div>
</div>

However, if I try to add:

<div ng-repeat="product in products | orderBy: '-value.timestamp_creation'" ng-if="$index % 4 == 0" class="row">
      <!-- see above -->
</div>

where products looks as follows (array):

[
  {name: "John", value: {timestamp_creation: 1}}, 
  {name: "Andrew", value: {timestamp_creation: 4}},
  {name: "Senior", value: {timestamp_creation: 2}}
  {name: "Dog", value: {timestamp_creation: 3}}
]

Then it does not work to sort the grid. It just shows the order 1,4,2,3.

Note that the following way to sort the grid works (but then I don't get a row after every 4th column)

<div ng-repeat="product in products | orderBy: '-value.timestamp_creation'" class="row">
    <div class="col-xs-4">{{product}}</div>
</div>

So how to combine these two approaches, to get a column after every 4th item but still be able to sort the list?

Answer 1

It should work. Which angular version you're using. I checked in fiddle with every 2nd row.

See Working Fiddle

HTML

<div ng-controller="MyCtrl">
  <div ng-repeat="product in products | orderBy: '-value.timestamp_creation'" ng-if="$index % 2 === 0" class="row">
    <div class="col-xs-4">{{product}}</div>
</div>
</div>

Controller

function MyCtrl($scope) {
    $scope.products = [
        {name: "John", value: {timestamp_creation: 1}}, 
        {name: "Andrew", value: {timestamp_creation: 4}},
        {name: "Senior", value: {timestamp_creation: 2}},
        {name: "Dog", value: {timestamp_creation: 3}},
        {name: "John 1", value: {timestamp_creation: 7}}, 
        {name: "Andrew 1", value: {timestamp_creation: 6}},
        {name: "Senior 1", value: {timestamp_creation: 8}},
        {name: "Dog 1", value: {timestamp_creation: 5}}
    ];
}