title: Dynamically control the number of grids to appear based on screen width
body: <p>I have a grid layout displaying 3 grids in a row , now i have been trying is if the width of screen is above 1600 px i want the row to display 4 grid items, i am controlling the items using this bit of code </p>
  
  <pre><code> &lt;div class="item row" ng-repeat="row in Scroller |filter:$parent.searchText" ng-if="$index % 3 == 0"&gt;
  
  &lt;div class="col-lg-4 col-md-6" ng-repeat="scrollIndex in [$parent.$index, $parent.$index + 1, $parent.$index + 2]" ng-init="scroll = Scroller[scrollIndex]"&gt; 
  </code></pre>
  
  <p>now if i add $parent.$index + 3 that adds one more grid item to row,, but how to do it for above 1600 px width screen to display 4 grid items.</p>
  
  <p>In controllers</p>
  
  <pre><code>$scope.$watch(function () {
      return window.innerWidth;
  }, function (value) {
      return value;
  });
  $scope.gridDisplay = '';
  
  if (value &gt; 1600) {
      $scope.gridDisplay = [$parent.$index, $parent.$index + 1, $parent.$index + 2, $parent.$index + 3];
  }
  else {
      $scope.gridDisplay = [$parent.$index, $parent.$index + 1, $parent.$index + 2];
  }
  </code></pre>
  
  <p>and i am calling gridDisplay in HTML code </p>