Is it possible to update ng-repeat at responsive breakpoints?

Question

Is it possible to have Angular update an ng-repeat at particular screen-sizes?

I have 20 divs, however at 640px and below I would like to display only 6, between 640px 1024px I would like to display 15 and greater than 1024px I would like to display all 20.

As I mentioned I am using ng-repeat to rollout the divs and I would like to be able to reinit?? (not sure if that is the right term, I am learning) the ng-repeat function when the browser hits one of those sizes. The ng-repeat would be updated with the amount of items needed to roll out and would then roll them out.

This is how I have the ng-repeat set up:

.articles(ng-controller="articlesCtrl")
  .article(ng-repeat="article in articles | limitTo:15", class='item-{{ $index + 1 }}')

Answer 1

As Sasxa was saying, declare a scope variable like "myScopeVar" or "someValue"

JS - in your controller

$scope.numDisp = 6;
// based on screen width, but you can base on height as well http://www.w3schools.com/js/js_window_screen.asp
if(window.screen.width < 641)
    $scope.numDisp = 6; // 
else if(window.screen.width > 640 && window.screen.width < 1025)
    $scope.numDisp = 15
else if(window.screen.width > 1024)
    $scope.numDisp = 20

HTML:

.article(ng-repeat="article in articles | limitTo: numDisp", class='item-{{ $index + 1 }}')

Update

I looked at your plunker and noticed that you should be firing the screen width check inside your directive.

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

app.controller('MainCtrl', function($scope) {
  $scope.items = [
    1, 2, 3, 4, 5, 6, 7, 8, 9, 10
  ];

  $scope.numDisp = 3;

});

app.directive('resizable', function($window) {
  return function($scope) {
    $scope.initializeWindowSize = function() {
      $scope.windowHeight = $window.innerHeight;
      // do width check here, especially since you have $window object here already
      if($window.innerWidth < 641)
          $scope.numDisp = 3; // 
      else if($window.innerWidth > 640 && $window.innerWidth < 1025)
          $scope.numDisp = 5;
      else if($window.innerWidth > 1024)
          $scope.numDisp = 10;

      console.log($window.innerWidth, $scope.numDisp); // check console for right output

      return $scope.windowWidth = $window.innerWidth;
    };
    $scope.initializeWindowSize();
    return angular.element($window).bind('resize', function() {
      $scope.initializeWindowSize();
      return $scope.$apply();
    });
  };
});

Answer 2

limitTo is a angular filter and when you set its variable the ng-repeat directive recompiles it's content (more about directives and $compile)

you can also set a function:

ng-repeat="item in items | limitTo:calcLimit()"

and just return what you need

  $scope.calcLimit = function(limit) {
    if (resolution >= 1024)
      return 10;
    else if (resolution >= 640)
      return 6;
    else
      return 3;
  };

plunker example have fun! =)