Batched digest

47 Lower River st Apt 326

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js"></script>
<div ng-app="myApp">
  <h2>All digests logged in console...</h2>
  <div ng-controller="myController">
      <button ng-click="applyTrigger()">applyTrigger</button>
      <button ng-click="applyAsyncTrigger()">applyAsyncTrigger</button>
      
      <div ng-repeat="i in repeatArr">
          <div some-directive> 
              The repeated directive 
          </div>
      </div>
  </div>
</div>

JavaScript

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

myApp.controller('myController', [ '$scope', 
    function($scope){
        var digestsCalled = 0;
        
        $scope.repeatArr = [0,1,2,3,4,5,6,7,8,9];
		
        $scope.$watch(function() {
          digestsCalled++;
          console.log("Digests called: ", digestsCalled)
        });
        
        $scope.applyTrigger = function(){
          $scope.$broadcast('doApply');
        }
        
        $scope.applyAsyncTrigger = function(){
          $scope.$broadcast('doApplyAsync');
        }
        
    }
]);

myApp.directive('someDirective', function(){
    return {
        scope: {
            applyTrigger: '=',
            applyAsyncTrigger: '='
        },
        link: function(scope){
            scope.$on('doApply', function(){
                console.log('working... applyTrigger');
                scope.$apply();
            });
            scope.$on('doApplyAsync', function(){
                console.log('working... applyTrigger');
                scope.$applyAsync();
            });
        }
    };
});