sleep angular scopes

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

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.items = [
    1,2,3,4  
  ]
  var c = 0;
  $scope.add = function(val) {
    $scope.items.push(val + c++)
  };
  $scope.sleep = false;
  $scope.toggle = function() {
    $scope.sleep = !$scope.sleep;
  };
  $scope.test = function(v) {
    v++;
  };
});

// taken from 'https://rawgit.com/shahata/angular-viewport-watch/'
app.directive('sleep', function($parse) {
  return {
    restrict:'A',
    scope: true,
    link: function(scope, element, attr) {
      function watchDuringDisable() {
          this.$$watchersBackup = this.$$watchersBackup || [];
          this.$$watchers = this.$$watchersBackup;
          this.constructor.prototype.$watch.apply(this, arguments);
          this.$$watchers = null;
      }
      function toggleWatchers(scope, enable) {
          var digest, current, next = scope;
          do {
              current = next;
              if (enable) {
                  if (current.hasOwnProperty("$$watchersBackup")) {
                      current.$$watchers = current.$$watchersBackup;
                      delete current.$$watchersBackup;
                      delete current.$watch;
                      digest = !scope.$root.$$phase;
                  }
              } else {
                  if (!current.hasOwnProperty("$$watchersBackup")) {
                      current.$$watchersBackup = current.$$watchers;
                      current.$$watchers = null;
                      current.$watch = watchDuringDisable;
                  }
              }
              next = current.$$childHead;
              while (!next && current !== scope) {
                  if (current.$$nextSibling) {
                      next = current.$$nextSibling;
                  } else {
                      current = current.$parent;
                  }
              }
          } while (next);
          if (digest) {
              scope.$digest();
          }
      }
      scope.$on("toggleWatchers", function(event, enable) {
          toggleWatchers(scope, enable);
      });
    
      var exp = $parse(attr.sleep);
      scope.$parent.$watch(function() {
        return exp(scope.$parent);
      }, function(newVal, oldVal) {
        if (newVal === undefined) {
          return;
        }
        scope.$parent.$broadcast('toggleWatchers', !newVal);
      })
    }
  }
})

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.0-rc.0/angular.js" data-semver="1.4.0-rc.0"></script>
    <script src="app.js"></script>
  </head>

  <div ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
      <ul sleep="sleep" viewport-watch>
        <li ng-repeat="item in items" ng-init="v=0">
          <button ng-click="v=v+1">fdsggsd{{v}}</button>
          {{item}}</li>
      </ul>
    <input ng-model="val"></input>
    <button ng-click="add(val)">add</button>
    
    <button ng-click="toggle()">toggle</button> {{sleep}}
  </div>
  
</html>

/* Put your css in here */