Using multiple controllers defined via module does not work

Question

When defining controllers as global functions, everything works fine. But when using the modules to declare and "assign" the controllers, only the first controller is used to resolve the bindings. What am i missing?

<!doctype html>
<html>
<head/>
<body>
  <div ng-app="flintstones">
    <div ng-controller="flintstoneCtrl">
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </div>
  <div ng-app="rumbles">
    <div ng-controller="rumbleCtrl">
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </div>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script>

  var flintstones = angular.module("flintstones", []);
  flintstones.controller("flintstoneCtrl", function flintstoneCtrl($scope) {
    $scope.yourName = "Fred";
  });

  var rumbles = angular.module("rumbles", []);
  rumbles.controller("rumbleCtrl", function rumbleCtrl($scope) {
    $scope.yourName = "Barney";
  });

</script>

</html>

I think, one page can have only one ng-app in your case you have two ng-app definitions, if you have multiple apps in a page you have to do manual bootstrapping — Arun P Johny
– Arun P Johny, Commented Apr 18, 2013 at 10:12

Martin · Accepted Answer · 2013-04-18 12:34:36Z

12

@Arun is correct. However, in your case I'm guessing you don't really want to bootstrap Angular twice, but simply use controllers defined in different modules.

This is usually done by having a page/site module which have dependencies on all modules required, in your case flintstones and rumbles.

angular.module('flintstones', []).controller('flintstoneCtrl', ...);
angular.module('rumbles', []).controller('rumbleCtrl', ...);

// Create a module with dependencies.
angular.module('myApp', ['flintstones', 'rumbles'])...

In your html, you then simply use ng-app="myApp" and content from that module and all its dependencies will be accessible.

<html ng-app="myApp">
  <body>
    <div ng-controller="flintstoneCtrl">...</div>
    <div ng-controller="rumbleCtrl">...</div>
  </body>
</html>

answered Apr 18, 2013 at 12:34

Martin

8,8662 gold badges37 silver badges36 bronze badges

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

1 Comment

Florian Salihovic Over a year ago

Thanks for the addition. But actually i really need to bootstrap each module manually, since i can't know which component is used at runtime. It's for a quite big WCMS project and in some pages/contexts, i know the set of components (where i would choose your approach), in some pages/contexts that doesn't work so i really have to bootstrap everything by hand.

Community · Accepted Answer · 2017-05-23 12:31:36Z

6

I think, one page can have only one ng-app as default, in your case you have two ng-app definitions.

If you have multiple apps in a page you have to do manual bootstrapping

edited May 23, 2017 at 12:31

CommunityBot

11 silver badge

answered Apr 18, 2013 at 10:14

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Collectives™ on Stack Overflow

Using multiple controllers defined via module does not work

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related