greylurk/app.js

## app.js
'use strict';

// Declare app level module
var widgetSlider = angular.module('widgetSlider', []);

widgetSlider.directive("foo", [ "$log", function( $log ) {
	return {
		restrict: "E",
		template: "<div ng-bind='values'></div><bar />",
		controller: function($scope) {
			$scope.values = "";
			$scope.count = 0;
			this.addValue = function() {
				$scope.values += "<div>row " + (++$scope.count) + "</div>";
				$log.warn($scope.count);
			}
		}
	};
}]);

widgetSlider.directive("bar", function() {
	return {
		require: "^foo",
		restrict: "E",
		template: "<button>Add Number</button>",
		link: function($scope, elem, attr, fooCtrl) {
			var button = elem.find("button");
			button.on("click", function() {
				fooCtrl.addValue();
			});
		}
	};
})

## index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My AngularJS App</title>
  <link rel="stylesheet" href="css/app.css"/>
</head>
<body ng-app="widgetSlider">
  <foo />

  <!-- In production use:
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  -->
  <script src="lib/angular/angular.js"></script>
  <script src="js/app.js"></script>
</body>
</html>
	'use strict';

	// Declare app level module
	var widgetSlider = angular.module('widgetSlider', []);

	widgetSlider.directive("foo", [ "$log", function( $log ) {
	return {
	restrict: "E",
	template: "<div ng-bind='values'></div><bar />",
	controller: function($scope) {
	$scope.values = "";
	$scope.count = 0;
	this.addValue = function() {
	$scope.values += "<div>row " + (++$scope.count) + "</div>";
	$log.warn($scope.count);
	}
	}
	};
	}]);

	widgetSlider.directive("bar", function() {
	return {
	require: "^foo",
	restrict: "E",
	template: "<button>Add Number</button>",
	link: function($scope, elem, attr, fooCtrl) {
	var button = elem.find("button");
	button.on("click", function() {
	fooCtrl.addValue();
	});
	}
	};
	})
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>My AngularJS App</title>
	<link rel="stylesheet" href="css/app.css"/>
	</head>
	<body ng-app="widgetSlider">
	<foo />

	<!-- In production use:
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
	-->
	<script src="lib/angular/angular.js"></script>
	<script src="js/app.js"></script>
	</body>
	</html>