RadoMark/batch_rendering.html

## batch_rendering.html
<body ng-controller="AppCtrl">
  <div ng-repeat="element in elements | limitTo: elementsLimit track by element.id">
    {{ element.name }}
  </div>
</body>

<script>
  app.controller("AppCtrl", function($scope, Elements) {
    $scope.elements = Elements.get();
    renderUsersInBatchesWithDelay(10, 5, 250)

    function renderUsersInBatchesWithDelay(firstBatchSize, otherBatchSize, delay) {
      var batchSize = firstBatchSize;

      // We use window.setTimeout to call first step of rendering immediately, trigger $scope.$digest
      // instead of $apply and avoid "digest in progress" error
      setTimeout(function() {
        batchRenderingStep(batchSize);
        batchSize = otherBatchSize;
      }, 0)

      // We use here window.setInterval instead of Angular's $interval to trigger
      // only $scope.$digest() instead of $rootScope.$apply() ($interval does that)
      var interval = setInterval(function() {
        batchRenderingStep(batchSize);
        if($scope.elementsLimit >= $scope.elements.length) {
          clearInterval(interval);
        }
      }, delay)
    }

    function batchRenderingStep(batchSize) {
      $scope.elementsLimit += batchSize;
      $scope.$digest();
    }
  })
</script>
	<body ng-controller="AppCtrl">
	<div ng-repeat="element in elements \| limitTo: elementsLimit track by element.id">
	{{ element.name }}
	</div>
	</body>

	<script>
	app.controller("AppCtrl", function($scope, Elements) {
	$scope.elements = Elements.get();
	renderUsersInBatchesWithDelay(10, 5, 250)

	function renderUsersInBatchesWithDelay(firstBatchSize, otherBatchSize, delay) {
	var batchSize = firstBatchSize;

	// We use window.setTimeout to call first step of rendering immediately, trigger $scope.$digest
	// instead of $apply and avoid "digest in progress" error
	setTimeout(function() {
	batchRenderingStep(batchSize);
	batchSize = otherBatchSize;
	}, 0)

	// We use here window.setInterval instead of Angular's $interval to trigger
	// only $scope.$digest() instead of $rootScope.$apply() ($interval does that)
	var interval = setInterval(function() {
	batchRenderingStep(batchSize);
	if($scope.elementsLimit >= $scope.elements.length) {
	clearInterval(interval);
	}
	}, delay)
	}

	function batchRenderingStep(batchSize) {
	$scope.elementsLimit += batchSize;
	$scope.$digest();
	}
	})
	</script>