JSFiddle - React, Tailwind, and code Playground

by BuriB

HTML

<body ng-app="app" ng-controller="myTestCntrl">
	    <input type="button" ng-click="increaseCounter()" value="Click me" /> clicked: {{counter}} times<br/>
	    <input type="button" ng-click="pauseWatcher()" value="{{watcherBtnText}}" /> watched: {{internalCounter}} times<br/>
	    <strong>Number of $$watchers in $scope:</strong> {{$$watchers.length}}
	    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
	    <script type="text/javascript">
	        angular.module('app', [])
	            .controller('myTestCntrl', function myTestCntrl($scope) {
	            $scope.counter = 0;
	            $scope.pauseWatching = false;
	            $scope.watcherBtnText = 'Pause';
	            $scope.internalCounter = -1;
	            $scope.increaseCounter = function() {
	                $scope.counter++;
	            };
	            var listenerFn = function() {
	                if ($scope.pauseWatching) {
	                    namedWatcher();
	                } else {
	                    $scope.internalCounter++;
	                };
	            }
	            var namedWatcher = $scope.$watch('counter', listenerFn);
	            $scope.pauseWatcher = function() {
	                if ($scope.pauseWatching) {
	                    $scope.watcherBtnText = 'Pause';
	                    $scope.pauseWatching = false;
	                    $scope.internalCounter--;
	                    namedWatcher = $scope.$watch('counter', listenerFn);
	                } else {
	                    $scope.watcherBtnText = 'Continue';
	                    $scope.pauseWatching = true;
	                    namedWatcher();
	                };
	            }
	        });
	    </script>
	</body>

CSS

input[type="button"] { width: 75px; text-align: center;}