Error with angular program

Question

I am new to angularjs and while trying it I got problem. Here is my code snippet.I defined angular apps named nameApp ,ageApp and there controllers. First app nameApp is working properly and my problem is with second app ageApp. Its not working properly.

<html>
  <head>
    <meta charset="utf-8">
    <title>Angular.js Example</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <script>
      var nameApp = angular.module('nameApp',[]);
      nameApp.controller('NameCtrl',function($scope){
        $scope.firstName = "User";
        $scope.lastName = "Name";
      })

      var ageApp  = angular.module('ageApp',[]);
      ageApp.controller('ageCtrl',function($scope){
        $scope.age = "35";
      })      
    </script>
  </head>
  <body>
    <div ng-app="nameApp" ng-controller="NameCtrl">
      First name:<input ng-model="firstName" type="text"/>
      <br>
      Last name:<input ng-model="lastName" type="text"/>
      <br>
      Hello {{firstName}} {{lastName}}
    </div>

    <div ng-app="ageApp" ng-controller="ageCtrl">
      Your Age<input ng-model="age" type="text"/>
      <br>
      My age is:  {{age}}
    </div>
  </body>
</html>

Values of firstName and lastName are binding properly,but the attribute age is not properly.

I would recommend you to use single app. currently you've two SPA in your app. rather then making two app, make one app and make a separate modules in same app for both parts. — Varit J Patel, Jul 27 '16 at 12:34
duplicate with http://stackoverflow.com/questions/18571301/angularjs-multiple-ng-app-within-a-page angular.bootstrap(document.getElementById("App2"), ['ageApp']); — mokarakaya, Jul 27 '16 at 12:45

score 2 · Accepted Answer · answered Jul 27 '16 at 12:45

The problem can be found by looking at the docs for ngApp directive:

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.

score 1 · Answer 2 · answered Jul 27 '16 at 12:43

What exactly I have done here is,

I have make two modules name : nameApp and ageApp. and nameApp will be the main module that is having dependency of ageApp and will load ageApp module as well.

Since Angular is single page application. we can make one main module and inject dependency of other modules.

<html ng-app="nameApp">
  <head>
    <meta charset="utf-8">
    <title>Angular.js Example</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <script>
      var nameApp = angular.module('nameApp',['ageApp']);
      nameApp.controller('NameCtrl',function($scope){
        $scope.firstName = "User";
        $scope.lastName = "Name";
      })

      var ageApp  = angular.module('ageApp',[]);
      ageApp.controller('ageCtrl',function($scope){
        $scope.age = "35";
      })      
    </script>
  </head>
  <body>
    <div ng-controller="NameCtrl">
      First name:<input ng-model="firstName" type="text"/>
      <br>
      Last name:<input ng-model="lastName" type="text"/>
      <br>
      Hello {{firstName}} {{lastName}}
    </div>

    <div ng-controller="ageCtrl">
      Your Age<input ng-model="age" type="text"/>
      <br>
      My age is:  {{age}}
    </div>
  </body>
</html>

Hope it helps you.

Let me know if you've more questions.

Cheers!

score 0 · Answer 3 · edited May 23 '17 at 12:14

As I mentioned this is duplicate with; AngularJS Multiple ng-app within a page

You need to bootstrap after div is created and it's not obvious in duplicate item.

<html>
  <head>
    <meta charset="utf-8">
    <title>Angular.js Example</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <script>
      var nameApp = angular.module('nameApp',[]);
      nameApp.controller('NameCtrl',function($scope){
        $scope.firstName = "User";
        $scope.lastName = "Name";
      });

      var ageApp  = angular.module('ageApp',[]);
      ageApp.controller('ageCtrl',function($scope){
        $scope.age = "35";
      });      

    </script>
  </head>
  <body>
    <div ng-app="nameApp" ng-controller="NameCtrl">
      Firsta name:<input ng-model="firstName" type="text"/>
      <br>
      Last name:<input ng-model="lastName" type="text"/>
      <br>
      Hello {{firstName}} {{lastName}}
    </div>

    <div id="App2" ng-app="ageApp" ng-controller="ageCtrl">
      Youra Age<input ng-model="age" type="text"/>
      <br>
      My age is:  {{age}}
    </div>
  </body>
  <script>
    angular.bootstrap(document.getElementById("App2"), ['ageApp']);
  </script>
</html>

Error with angular program

3 Answers3