I've followed this answer for making a multiple modules in AngularJS, but it doesn't work when I split the Angular codes into multiple js files.
Bootstrap.js
angular.bootstrap(document.getElementById("App2"),['namesList']);
HTML
<html>
<head>
<script src="components/angular/angular.js"></script>
<script src="scripts/module1.js"></script>
<script src="scripts/module2.js"></script>
<script src="scripts/bootstrap.js"></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">
<p>{{_name.username}}</p>
</div>
</div>
</body>
</html>
Result: the second module doesn't work.
Inline script
<html>
<head>
<script src="components/angular/angular.js"></script>
<script src="scripts/module1.js"></script>
<script src="scripts/module2.js"></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">
<p>{{_name.username}}</p>
</div>
</div>
<script>
angular.bootstrap(document.getElementById("App2"),['namesList']);
</script>
</body>
</html>
Result: it works.
Any ideas what I have missed?
