How to use 2 angularjs apps in same html page?

Question

Here is the code to reproduce, where 2nd app fails:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<div ng-app="myApp1" ng-controller="myCtrl1">
{{ firstName + " " + lastName }}
</div>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});

var app1 = angular.module("myApp1", []);
app1.controller("myCtrl1", function($scope) {
    $scope.firstName = "John1";
    $scope.lastName = "Doe1";
});

</script>

</body>
</html>

Also I have tried to use angular.bootstrap with no luck like suggested here

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<div ng-app="myApp1" ng-controller="myCtrl1">
{{ firstName + " " + lastName }}
</div>


<script>

var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});

angular.bootstrap(document, ['myApp']);


var app1 = angular.module("myApp1", []);

app1.controller("myCtrl1", function($scope) {
    $scope.firstName = "John1";
    $scope.lastName = "Doe1";
});

angular.bootstrap(document, ['myApp1']);

</script>

</body>
</html>

Update:

Working example:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div id="firstApp" ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<div id="firstApp1" ng-app="myApp1" ng-controller="myCtrl1">
{{ firstName + " " + lastName }}
</div>


<script>

var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});

let appEl1 = document.getElementById("firstApp");
angular.bootstrap(appEl1, ['myApp']);


var app1 = angular.module("myApp1", []);

app1.controller("myCtrl1", function($scope) {
    $scope.firstName = "John1";
    $scope.lastName = "Doe1";
});

let appEl2 = document.getElementById("firstApp1");
angular.bootstrap(appEl2, ['myApp1']);

</script>

</body>
</html>

Possible duplicate of [AngularJS Multiple ng-app within a page](https://stackoverflow.com/questions/18571301/angularjs-multiple-ng-app-within-a-page) — NTP, Jan 25 '18 at 15:56
Inject one app inside other app.. in other words, make one root app. will work. — Avnesh Shakya, Jan 25 '18 at 15:57

score 1 · Accepted Answer · answered Jan 25 '18 at 15:59

The problem is you are bootstrapping both apps on document. It needs to be on the element(div in your case) that you want it to be according to angular.bootstrap documentation here

Eg:

<div id="firstApp">

let appEl1 = document.getElementById("firstApp");
angular.bootstrap(appEl1, ['myFirstApp']);

score 0 · Answer 2 · answered Jan 25 '18 at 15:59

You need to use

angular.bootstrap(document.getElementById("appID"), ['myApp1']);

with

<div id="appID" ng-app="myApp1" ng-controller="myCtrl1">

This will bootstrap it manually.

(You also had a typo(?) in your first case with registering a controller: app.controller("myCtrl1" should be app1.controller("myCtrl1")

How to use 2 angularjs apps in same html page?

2 Answers2