I have implement 2 app in anugar js but not working

Question

I have implemented 2 ng-app in single html page and it is not working for second one, Please look into my code and suggest me where I am wrong.

 <div id="App1" ng-app="shoppingCart" ng-controller="ShoppingCartController">
        <p>Name : <input type="text" data-ng-model="name"></p>
        <h1>Hello {{name}}</h1>


        <p> Name: <input type="text" id="first_name" ng-model="first_name"></p>
        <h1 ng-bind="first_name"></h1>


        <div ng-init="firstName='jaskaran'"  id="firstName"></div>
        <p> This is the first name:<span ng-bind="firstName"></span></p>

        <p id ="x">
            my first calculation {{5+5}}
        </p>
  </div>


        <div id="App2" ng-app="namesList" ng-controller="NamesController" >
            <input type="text" id="firstLast" ng-model="firstLast">
            Full Name: {{firstLast}} 

        </div>

script here

var xApp = angular.module('shoppingCart',[])
xApp.controller ('ShoppingCartController', function($scope) {

}) ;

var app = angular.module('namesList',[])
app.controller('NamesController',function($scope){

      $scope.firstLast = "Nitin" ;


});

`ng-app` should be used only once in an application.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. `conclusion-`If more than one ng-app directive appears, the first appearance will be used. — Debug Diva, Sep 01 '16 at 09:00
http://stackoverflow.com/questions/18571301/angularjs-multiple-ng-app-within-a-page Here it is working, But not in mycode — Sandeep, Sep 01 '16 at 09:04

score 1 · Accepted Answer · answered Sep 01 '16 at 09:26

1

Visit This URL You Can find the Solution http://shrestha-manoj.blogspot.in/2014/06/can-angularjs-have-multiple-ng-app.html

answered Sep 01 '16 at 09:26

sai

126
1
8

score 0 · Answer 2 · answered Sep 01 '16 at 09:08

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.

Try this :

angular.bootstrap(document.getElementById("App2"), ['namesList']);

It will bootstrap your second ng-app directive.

I have implement 2 app in anugar js but not working

2 Answers2