Multiple ng-app issue

Question

Html file

<!DOCTYPE html>
<html >
    <head>
        <title>Angular JS Demo</title>
        <script src="scripts/angular.min.js"></script> 
        <script src="scripts/Script_1.js"></script>
        <meta charset="utf-8" />
    </head>
    <body>
        <div  ng-app="HelloWorldApp" ng-controller="HelloWorldController">
            Message: {{ greeting }}
        </div>
        <div id="class2" ng-controller="HelloWorldController1">
           Message: {{ message }}
         </div>
    </body>
</html>

Script_1.js

/// <reference path="angular.min.js" />
angular.module('HelloWorldApp', []).controller("HelloWorldController", function ($scope) {
   $scope.greeting = "Hello World";
});

angular.module('HelloWorldApp1',[]).controller("HelloWorldController1",function ($scope) {
   $scope.message = "Hello World";
});
angular.bootstrap(document.getElementById('class2'), ['HelloWorldApp1']);

The output is 
     Message: Hello World
     Message: {{ message }}

Though I used the angular.bootstrap(document.getElementById('class2',[HelloWorldApp1]); Why it is not bootstrapping.I am new to this anugular js,am I missing any libraries? I am stuck here.Pls help me.

Thank you

Don't know what you want to do but it seems similar to this one http://stackoverflow.com/questions/18571301/angularjs-multiple-ng-app-within-a-page — rick, Aug 02 '16 at 16:31
Is your HTML example right? The `HelloWorldController1` isn't inside any ng-app. :) — Elias Soares, Aug 02 '16 at 16:40

Rani Radcliff · Answer 1 · 2016-08-03T16:15:21.550

0

Try this:

  <!DOCTYPE html>
    <html >
        <head>
            <title>Angular JS Demo</title>
            <script src="scripts/angular.min.js"></script> 
            <script src="scripts/Script_1.js"></script>
            <meta charset="utf-8" />
        </head>
        <body>
            <div  ng-app="HelloWorldApp" ng-controller="HelloWorldController">
                Message: {{ greeting }}
            </div>
            <div id="class2"ng-app="HelloWorldApp1" ng-controller="HelloWorldController1">
               Message: {{ message }}
             </div>
        </body>
    </html>

edited Aug 03 '16 at 16:15

answered Aug 02 '16 at 16:51

Rani Radcliff

4,856
5
33
60

I've tried it but still displays the same. /// angular.module('HelloWorldApp', []).controller("HelloWorldController", function ($scope) { $scope.greeting = "Hello World"; }); angular.module('HelloWorldApp1', []).controller("HelloWorldController1", function ($scope) { $scope.message = "Hello World 22"; }); angular.element(document).ready(function () { angular.bootstrap(document.getElementById("id2"), ['HelloWorldApp1']); }); my second module is not getting boostrapped. – Vijay Vj Aug 03 '16 at 07:56

Multiple ng-app issue

1 Answers1