aeisenberg/nested_scopes2.html

## nested_scopes2.html
<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        angular.module('watchingApp', [])
        .controller('watchedController', function($scope) {
        	$scope.value = 9;
        })
        .directive('watching', function() {
        	return {
        		restrict: 'E',
        		scope: {
        			value: '='
        		},
      			link: function(scope, element, foo) {
      				scope.clicked = function() {
      					scope.value = scope.value+1;
      				};
      			},
      			template: '<p>My value is {{value}}<br/><button ng-click="clicked()">Click me!</button></p>'
        	};
        });
    </script>
</head>
<body id="watchingApp">
	<div ng-controller="watchedController">
		Value is {{value}}. This value and the next are always the same.
		<watching value="value"></watching>
		<div ng-if="true">
			These next two values start the same, but after clicking one of their buttons,
			they diverge from the outer values.
			<watching value="value"></watching>
			<watching value="value"></watching>
			What is going on?
		</div>
	</div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
	angular.module('watchingApp', [])
	.controller('watchedController', function($scope) {
	$scope.value = 9;
	})
	.directive('watching', function() {
	return {
	restrict: 'E',
	scope: {
	value: '='
	},
	link: function(scope, element, foo) {
	scope.clicked = function() {
	scope.value = scope.value+1;
	};
	},
	template: '<p>My value is {{value}}<br/><button ng-click="clicked()">Click me!</button></p>'
	};
	});
	</script>
	</head>
	<body id="watchingApp">
	<div ng-controller="watchedController">
	Value is {{value}}. This value and the next are always the same.
	<watching value="value"></watching>
	<div ng-if="true">
	These next two values start the same, but after clicking one of their buttons,
	they diverge from the outer values.
	<watching value="value"></watching>
	<watching value="value"></watching>
	What is going on?
	</div>
	</div>
	</body>
	</html>