1

In this example why isn't the 2nd module working?

JSFiddle example.

HTML

<div ng-app="My.App" ng-controller="MyController">
    Hello {{ test }}
</div>

<div ng-app="My.App2" ng-controller="MyController2">
    Hello {{ test2 }}
</div>

Javascript

var MyApp = angular.module("My.App", []);
var MyApp2 = angular.module("My.App2", []);

MyApp.controller("MyController", function($scope) {
      $scope.test = "Bob";
});

MyApp2.controller("MyController2", function($scope) {
      $scope.test2 = "Bob";
});

Result

Hello Bob

Hello {{ test2 }}

Community
  • 1
  • 1
PeteGO
  • 5,597
  • 3
  • 39
  • 70
  • 1
    are you sure this is the correct JSFiddle? Because it's not the same as the code in your question – Alon Eitan Nov 08 '15 at 13:39
  • 1
    Possible duplicate of [How to define two angular apps / modules in one page?](http://stackoverflow.com/questions/12860595/how-to-define-two-angular-apps-modules-in-one-page) – sheilak Nov 08 '15 at 13:40
  • I've corrected the Fiddle link – PeteGO Nov 08 '15 at 13:51

1 Answers1

3

Unfortunately this is not possible. You can only have one ngApp directive in one HTML document.

See respective docs here: https://docs.angularjs.org/api/ng/directive/ngApp

Edit: There is another way as mentioned below - where you bootstrap the second module manually with angular.bootstrap, see: https://docs.angularjs.org/api/ng/function/angular.bootstrap

I have updated your JSFiddle: http://jsfiddle.net/U3pVM/20000/

FlorianTopf
  • 938
  • 6
  • 10