AngularJS: Second app in template doesn't work

Question

I have two identical apps (apart from app/controller name) right after each other. The first one works as expected, the second one is apparently not executed at all.

My code (jsfiddle):

<div ng-app="passwdtool" ng-controller="PasswordController">
Password: <input ng-model="pass" required type="text"><br>
<span>{{ hash }}</span><br>
</div>

<div ng-app="passwdtool2" ng-controller="PasswordController2">
Password: <input ng-model="pass" required type="text"><br>
<span>{{ hash }}</span><br>
</div>

angular.module('passwdtool', [])
.controller('PasswordController', ['$scope', function($scope) {
  $scope.pass = "password";
  $scope.hash = "a hash";
}]);

angular.module('passwdtool2', [])
.controller('PasswordController2', ['$scope', function($scope) {
  $scope.pass = "password";
  $scope.hash = "a hash";
}]);

The output:

Password: [password]
a hash
Password: []
{{ hash }}

What is going on?

Angular only boots the first ng-app. The second one should be booted manually — Kop4lyf, Apr 25 '15 at 09:02

score 2 · Accepted Answer · answered Apr 25 '15 at 09:12

AngularJS tries to find the first ng-app and boots it. If your are defining other ng-app inside the html, you will have to explicitly boot them.

The function for that is :

angular.bootstrap(<elements on which the ng-app will be attached>, <ng-app name>);

In your case it should be like:

var domElement = document.getElementById('app2'); //attach app2 id to the element.
angular.bootstrap(domElement, ["passwdtool2"]);

This functions is used in case you want multiple ng-apps on the same page. See this fiddle, I have modified on yours: https://jsfiddle.net/7bew5q0r/2/

Plus, you dont even need the second ng-app, since angular is going to ignore it anyway. So updating that: https://jsfiddle.net/7bew5q0r/3/

AngularJS: Second app in template doesn't work

1 Answers1