Second Angularjs app expression in div not working

Question

I'm currently learning Angularjs and am trying to work out why the expression in the 2nd <div> isn't working. It's displaying:

{{ firstName1 + " " + lastName1 }}

instead of:

John1 Doe1

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

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

<div ng-app="myApp1" ng-controller="myCtrl1">
{{ firstName1 + " " + lastName1 }}
</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.firstName1 = "John1";
    $scope.lastName1 = "Doe1";
});

</script>

</body>
</html>

EDIT:

To get this to work, do I need to remove ng-app="myApp1" ? What arguments do I pass in to angular.bootstrap() to get this to work?

The AngularJS framework only autoboots the first `ng-app` directive and ignores the other. — georgeawg, Jul 28 '19 at 05:56

score 1 · Accepted Answer · answered Jul 28 '19 at 06:01

There are a few things to keep in mind when using ngApp:

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.

See AngularJS ng-app Directive API Reference

Second Angularjs app expression in div not working

1 Answers1