,, tags, and it is automatically bootstrapped in an AngularJS application.

There are few things about the ng-app directive which are predefined, these are

1. We can use only one auto-bootstrapped ng-app directive per html page.
2. We cannot use nested Angularjs applications within each other.

How can we use multiple ng-app directives, that is, multiple Angular JS applications in a single HTML page?

As we know that a single auto-bootstrapped angularJs application can be included in a single page. We can use the multiple AngularJS applications in a single HTML page but those all must be manually-bootstrapped in the page.

Let’s discuss an example to understand the method of manually bootstrapping AngularJS application in a single HTML page.

I’m taking the example with two different ng-directives which are listing the toppers and loser students.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js "></script>

<!-- First AngularJS application with name “PassStudents” -->

<div id="App1" ng-app="PassStudents" ng-controller="PassStudentsController">
 <h3>List of three toppers students</h3>
<span><b>Name</b></span>
   <span><b>Marks</b></span>
 <div ng-repeat="student in students">
   <span>{{student.student_name}}:</span>
   <span>{{student.marks }} </span>
 </div>
</div>
<!-- Second AngularJS application with name “failStudents” -->

<div id="App2" ng-app="failStudents" ng-controller="failStudentsController">
   <h3>List of two loser students</h3>
   <span><b>Name</b></span>
   <span><b>Marks</b></span>
   <div ng-repeat="failstudent in failstudents">
       <span>{{failstudent.name}}:</span>
       <span>{{failstudent.marks}}</span>
   </div>
</div>

<script>
   /* “PassStudents” module definition(Auto-bootstrapped ) */

   var passStudentsModule = angular.module("PassStudents", []);
   passStudentsModule.controller("PassStudentsController",
       function($scope) {
           $scope.students = [{
               student_name: "Ram",
               marks: 50
           }, {
               student_name: "Sohan",
               marks: 49
           }, {
               student_name: "Sita",
               marks: 42
           }];
       }
   );

   /* “failStudents”  module definition */

   var failStudentsModule = angular.module("failStudents", []);
   failStudentsModule.controller("failStudentsController",
       function($scope) {
           $scope.failstudents = [{
               name: "Radha",
               marks: 12
           }, {
               name: "Mohan",
               marks: 15
           }];
       }
   );

   /* manually-bootstrapping the second module */
   angular.bootstrap(document.getElementById("App2"), ['failStudents']);
</script>

And the output of above code is:

In this way we can use a number of ng-app directives in a single HTML page by manually-bootstrapping those on that page. So, we can use only a single auto-bootstrapped ng-directive but multiple manually-bootstrapped AngularJS application on a single HTML page.