javascript - AngularJS: Second app in template doesn't work -

this question has answer here:

• how define 2 angular apps / modules in 1 page? 6 answers

i have 2 identical apps (apart app/controller name) right after each other. first 1 works expected, second 1 apparently not executed @ 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]
hash
password: []
{{ hash }}

what going on?

angularjs tries find first ng-app , boots it. if defining other ng-app inside html, have explicitly boot them.

the function :

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

in case should like:

var domelement = document.getelementbyid('app2'); //attach app2 id element. angular.bootstrap(domelement, ["passwdtool2"]); 

this functions used in case want multiple ng-apps on same page. see fiddle, have modified on yours: https://jsfiddle.net/7bew5q0r/2/

plus, dont need second ng-app, since angular going ignore anyway. updating that: https://jsfiddle.net/7bew5q0r/3/