Second Angularjs app expression in div not working [duplicate]

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
– georgeawg, Commented Jul 28, 2019 at 5:56

georgeawg · Accepted Answer · 2019-07-28 06:01:31Z

1

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

answered Jul 28, 2019 at 6:01

georgeawg

49k13 gold badges77 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Second Angularjs app expression in div not working [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related