CODEWITHSUNDEEP
angularjs
PeteGO
PeteGO

Reputation: 5791

Angular Subsequent Modules Working

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 }}

Upvotes: 1

Views: 36

Answers (1)

FlorianTopf
FlorianTopf

Reputation: 948

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/

Upvotes: 3

Related Questions