http://stackoverflow.com/questions/18571301/angularjs-multiple-ng-app-within-a-pagecss
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>angular Multiple app demo</title> <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.8/angular.min.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> 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>