官網說明如下：
- Every application has a single root scope. All other scopes are descendant scopes of the root scope.
- The location where the root scope is attached to the DOM is defined by the location of ng-app directive.
意思是說，在被宣告 ng-app 的 DOM 範圍內，只有一個 root scope 即 $rootScope。
言下之意，在<html></html>內可以有多個 ng-app。
第一個 ag-app 會自動被導引對應到 module 內，其餘要使用 angular.bootstrap 這個方法來做，範例如下：(看有綠色打勾的sample code)
http://stackoverflow.com/questions/18571301/angularjs-multiple-ng-app-within-a-page
<html>
<head>
<script src="angular.min.js" type="text/javascript"></script>
</head>
<body>
<div id="App1" ng-app="shoppingCart" ng-controller="ShoppingCartController">
<h1>Your order</h1>
<div ng-repeat="item in items">
<span>{{item.product_name}}</span> <span>{{item.price | currency}}</span>
<button ng-click="remove($index);">Remove</button></div>
</div>
<div id="App2" ng-app="namesList" ng-controller="NamesController">
<h1>List of Names</h1>
<div ng-repeat="_name in names">
{{_name.username}}</div>
</div>
<script type="text/javascript">
var shoppingCartModule = angular.module("shoppingCart", [])
shoppingCartModule.controller("ShoppingCartController",
function($scope) {
$scope.items = [
{product_name: "Product 1", price: 50},
{product_name: "Product 2", price: 20},
{product_name: "Product 3", price: 180}
];
$scope.remove = function(index) {
$scope.items.splice(index, 1);
}
}
);
var namesModule = angular.module("namesList", [])
namesModule.controller("NamesController",
function($scope) {
$scope.names = [
{username: "Nitin"},
{username: "Mukesh"}
];
}
);
angular.bootstrap(document.getElementById("App2"),['namesList']);
</script>
</body>
</html>
JoneyLiu 