bootstrap to use multiple ng-app

Question

I followed the code in AngularJS Multiple ng-app within a page

I don\'t know what i\'m missing.

    var reviewApp = angular.module(\"reviewApp\", []);
va         


        

Answer 1

When you are bootstrapping multiple apps, you can not use ng-app attribute more than once, angular takes the first one in markup and bootstraps it automatically, all the other ng-apps are ignored and you have to bootstrap them manually

var reviewApp = angular.module("reviewApp", []);
var reviewApp2 = angular.module("reviewApp2", []);

reviewApp.controller("reviewCtrl",
                     function ShippingAddressCtrl($scope, $http) {
    $scope.name='leo1';
});

reviewApp2.controller("productController",
                     function ProductController($scope, $http) {
    $scope.name1='leo2';
});
angular.element(document).ready(function() {
    angular.bootstrap(document.getElementById("div1"),['reviewApp']);
    angular.bootstrap(document.getElementById("div2"),['reviewApp2']);
});

html

{{name}}



{{name1}}