D3 Examples - Dynamic one time binding // source http://jsbin.com/comawi

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Dynamic one time binding" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-app="app"  
      ng-controller="OneBindingController" 
      >
​
  
  <a ng-click="stopWatching=true" href="#"> Stop Watching when reached the final state</a>:
  <span> {{stopWatching}}</span> <br>
  
  <a ng-click="assignValues()" href="#">  Assign values</a>
  <br>
  
  <hr>
  
  
  values:
  <div ng-if="!stopWatching"> 
    <span>{{value1}}</span> 
    <span>{{value2}}</span>
    <span>{{value3}}</span>
    <span>{{value4}}</span>
    <span>{{value5}}</span>
  </div>
  
  <div ng-if="::stopWatching"> 
    <span>{{::value1}}</span> 
    <span>{{::value2}}</span>
    <span>{{::value3}}</span>
    <span>{{::value4}}</span>
    <span>{{::value5}}</span>
  </div>
​
  <hr>
  <span> watchers: {{watchers }}</span>
​
  <br ng-init="countWatchers()"> 
<script id="jsbin-javascript">
angular.module('app', [])
.controller("OneBindingController", function($scope , $interval){
  
  $scope.assignValues = function(){
    $scope.value1 = 1;
    $scope.value2 = 2;
    $scope.value3 = 3;
    $scope.value4 = 4;
    $scope.value5 = 5; 
    
  };
​
  
  function countWatchers() { 
    var root = angular.element(document.getElementsByTagName('body'));
​
    var watchers = [];
​
    var f = function (element) {
        angular.forEach(['$scope', '$isolateScope'], function (scopeProperty) { 
            if (element.data() && element.data().hasOwnProperty(scopeProperty)) {
                angular.forEach(element.data()[scopeProperty].$$watchers, function (watcher) {
                    watchers.push(watcher);
                });
            }
        });
​
        angular.forEach(element.children(), function (childElement) {
            f(angular.element(childElement));
        });
    };
​
    f(root);
​
    // Remove duplicate watchers
    var watchersWithoutDuplicates = [];
    angular.forEach(watchers, function(item) {
        if(watchersWithoutDuplicates.indexOf(item) < 0) {
             watchersWithoutDuplicates.push(item);
        }
    });
​
      $scope.watchers = watchersWithoutDuplicates.length;
  }
  
  $interval(countWatchers, 100);
  
});
</script>
​
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta name="description" content="Dynamic one time binding" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"><\/script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-app="app"  
      ng-controller="OneBindingController" 
      >
​
  
  <a ng-click="stopWatching=true" href="#"> Stop Watching when reached the final state</a>:
  <span> {{stopWatching}}</span> <br>
  
  <a ng-click="assignValues()" href="#">  Assign values</a>
  <br>
  
  <hr>
  
  
  values:
  <div ng-if="!stopWatching"> 
    <span>{{value1}}</span> 
    <span>{{value2}}</span>
    <span>{{value3}}</span>
    <span>{{value4}}</span>
    <span>{{value5}}</span>
  </div>
  
  <div ng-if="::stopWatching"> 
    <span>{{::value1}}</span> 
    <span>{{::value2}}</span>
    <span>{{::value3}}</span>
    <span>{{::value4}}</span>
    <span>{{::value5}}</span>
  </div>
​
  <hr>
  <span> watchers: {{watchers }}</span>
​
  <br ng-init="countWatchers()"> 
</body>
</html></script>
​
​
<script id="jsbin-source-javascript" type="text/javascript">angular.module('app', [])
.controller("OneBindingController", function($scope , $interval){
  
  $scope.assignValues = function(){
    $scope.value1 = 1;
    $scope.value2 = 2;
    $scope.value3 = 3;
    $scope.value4 = 4;
    $scope.value5 = 5; 
    
  };
​
  
  function countWatchers() { 
    var root = angular.element(document.getElementsByTagName('body'));
​
    var watchers = [];
​
    var f = function (element) {
        angular.forEach(['$scope', '$isolateScope'], function (scopeProperty) { 
            if (element.data() && element.data().hasOwnProperty(scopeProperty)) {
                angular.forEach(element.data()[scopeProperty].$$watchers, function (watcher) {
                    watchers.push(watcher);
                });
            }
        });
​
        angular.forEach(element.children(), function (childElement) {
            f(angular.element(childElement));
        });
    };
​
    f(root);
​
    // Remove duplicate watchers
    var watchersWithoutDuplicates = [];
    angular.forEach(watchers, function(item) {
        if(watchersWithoutDuplicates.indexOf(item) < 0) {
             watchersWithoutDuplicates.push(item);
        }
    });
​
      $scope.watchers = watchersWithoutDuplicates.length;
  }
  
  $interval(countWatchers, 100);
  
});
</script></body>
</html>
    