Two modules on single page not working in angular js

Question

I am new to angular js . I have two modules first2a,first22. Each modules have one controller model1 and model2.

Below is my Html code

<!DOCTYPE html>
    <html >
        <head>
            <link rel="icon" type="image/png" href="globe/images/correct.png"/>
            <link rel="stylesheet" type="text/css" href="globe/css/style.css"/>     
            <script type="text/javascript" src="globe/script/jquery.js"></script>
            <script type="text/javascript" src="globe/script/angular.js"></script>
            <script type="text/javascript" src="globe/script/mainscope1.js"></script>
            <script type="text/javascript" src="globe/script/angular-route.js"></script>
            <title>
                Html5 All in One
            </title>
        </head>
        <body >
            <!-- MAin page -->
                <div  ng-app="first22" id="maincontainer" > 
                        <div ng-controller="model1">{{message}}</div>
                </div>
            <!-- MAin page End-->   
            <!-- Interactivity page -->     
                <div id="Interactive_content" ng-app="firsta" >
                    <div ng-controller="model2">{{message}}</div>
                </div>
            <!-- Interactivity page End-->          
        </body>
    </html>

mainscope1.js

var first2 = angular.module('first22', []);

    first2.controller('model1',function($scope)
    {
        $scope.message="aaaaaaa";

    })

var first2a=angular.module('firsta',[]);

    first2a.controller('model2',function($scope)
    {
        $scope.message="aaaaaaa1";

    })

Can anyone explain why firsta module is not working here. Thanks in advance

score 1 · Accepted Answer · answered Jul 17 '14 at 07:00

1

Try using angular boostrap , to happen when the document is ready:

angular.element(document).ready(function() { 
    angular.bootstrap(document.getElementById('maincontainer'), ['first22']);
    angular.bootstrap(document.getElementById('Interactive_content'), ['firsta']);
});

Check this fiddle

answered Jul 17 '14 at 07:00

vimal1083

8,499
6
34
50

could you please provide me the fiddle it would be usefull for me to understand – bharath Jul 17 '14 at 07:02
@user3792784 i have added fiddle – vimal1083 Jul 17 '14 at 07:03

score 1 · Answer 2 · edited May 23 '17 at 10:26

You can only use ng-app once per page. Are you trying to create two separate web applications side by side on this page, or are you only trying to have two controllers within a single application?

If you really want them to be a single application (which is what you normally would want), you set ng-app so that both ng-controller directives are inside it. For example, you can set ng-app on the html-tag, the body-tag or a div that wraps it.

<!DOCTYPE html>
    <html >
        <head>
            <link rel="icon" type="image/png" href="globe/images/correct.png"/>
            <link rel="stylesheet" type="text/css" href="globe/css/style.css"/>     
            <script type="text/javascript" src="globe/script/jquery.js"></script>
            <script type="text/javascript" src="globe/script/angular.js"></script>
            <script type="text/javascript" src="globe/script/mainscope1.js"></script>
            <script type="text/javascript" src="globe/script/angular-route.js"></script>
            <title>
                Html5 All in One
            </title>
        </head>
        <body ng-app="myAngularApplication">
            <!-- MAin page -->
                <div id="maincontainer" > 
                        <div ng-controller="model1">{{message}}</div>
                </div>
            <!-- MAin page End-->   
            <!-- Interactivity page -->     
                <div id="Interactive_content" >
                    <div ng-controller="model2">{{message}}</div>
                </div>
            <!-- Interactivity page End-->          
        </body>
    </html>

And the javascript would be:

var first2 = angular.module('myAngularApplication', []);

    first2.controller('model1',function($scope)
    {
        $scope.message="aaaaaaa";

    });

    first2.controller('model2',function($scope)
    {
        $scope.message="aaaaaaa1";

    });

OR, if you want to create two fully separated applications on the same page, you need to bootstrap them manually without using ng-app. Please see this SO question for details on how to do that.

score 0 · Answer 3 · edited May 23 '17 at 10:26

Possible duplicate of this question: https://stackoverflow.com/a/12864137/1177295

Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead. AngularJS applications cannot be nested within each other. -- http://docs.angularjs.org/api/ng.directive:ngApp

Two modules on single page not working in angular js

3 Answers3