<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title>Miscellaneous learning</title>
	<link rel="stylesheet" href="../css/bootstrap.min.css">
	<script src="../js/angular.min.js"></script>
	<script src="../js/ui-bootstrap-tpls-0.13.1.min.js"></script>
</head>
<body>

<!--
	<div data-ng-app="" data-ng-init="name='hello'">
		<p><label>
			Name:
			<input type="text" data-ng-model="name">
		</label></p>
		<p data-ng-bind="name"></p>
		<p>{{ name }}</p>
	</div>-->

	<div data-ng-app="myApp" data-ng-controller="myCtrl">
		<p><label>
			Name:
			<input type="text" data-ng-model="name">
		</label></p>
		<p data-ng-bind="name"></p>
		<p>{{ age }}</p>
	</div>

	<script>
		var app = angular.module('myApp', []);
		app.controller('myCtrl', function($scope) {
			$scope.name = 'test';
			$scope.age = 44;
		});
	</script>

</body>
</html>
<!DOCTYPE html>
<!--
Use two angular modules
-->
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title>Miscellaneous learning</title>
	<link rel="stylesheet" href="../css/bootstrap.min.css">
	<script src="../js/angular.min.js"></script>
	<script src="../js/ui-bootstrap-tpls-0.13.1.min.js"></script>
</head>
<body>

	<div data-ng-app="" data-ng-init="name='hello'">
		<p><label>
			Name:
			<input type="text" data-ng-model="name">
		</label></p>
		<p data-ng-bind="name"></p>
		<p>{{ name }}</p>
	</div>

	<div id="myApp" data-ng-app="myApp" data-ng-controller="myCtrl">
		<p><label>
			Name:
			<input type="text" data-ng-model="name">
		</label></p>
		<p data-ng-bind="name"></p>
		<p>{{ age }}</p>
	</div>

	<script>
		var app = angular.module('myApp', []);
		app.controller('myCtrl', function($scope) {
			$scope.name = 'test';
			$scope.age = 44;
		});
		angular.bootstrap(document.getElementById('myApp'), ['myApp']);
	</script>

</body>
</html>
Use two apps/modules on one page
Use two apps/modules on one page
