AngularJS doesn't work with multiple controllers

Question

I am new to AngularJS and my code unfortunately doesn't work. I want three dropdown fields, but I can only do one. If I use the code as you see below, only the first dropdown works; the second and third are empty.

I have the apprehension that it is because of AngularJS which I don't know, or I forgot...

I already googled this thing, but I didn't find anything that could help me. I have tried a lot of different ways but nothing works.

This is the html:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

//products
<div ng-app="product-selection" ng-controller="product-controller">
<select ng-model="choosenProduct" ng-options="x for x in products"></select>
<div ng-bind = "choosenProduct"></div>
</div>

//formats
<div ng-app="format-selection" ng-controller="format-controller">
<select ng-model="choosenFormat" ng-options="x for x in formats"></select>
</div>

//weights
<div ng-app="weight-selection" ng-controller="weight-controller">
<select ng-model="choosenWeight" ng-options="x for x in weights"></select>
</div>
</body>
</html>

And this is the JS:

<script>
var product = angular.module('product-selection',[]);
var weight = angular.module('weight-selection',[]);
var format = angular.module('format-selection',[]);

//products
product.controller('product-controller', function($scope){
    $scope.products = ["Brief", "Postkarte", "Infopost", "Büchersendung", "Warensendung", "PZA" ,"Päckchen", "Blindensendung"];
    });

//formats
format.controller('format-controller', function($scope){
    $scope.formats = ["Standard", "Kompakt", "Groß", "Maxi", "Maxi bis 2kg"];
    });

//weights
weight.controller('weight-controller', function($scope){
    $scope.weights = ["0-50g", "51-100g", "101-200g", "201-300g"];
});
</script>

Use one controller for this if they are going to depend on each other. It's not really clear what your use case is — charlietfl
– charlietfl, Commented Feb 26, 2016 at 16:02
Use single ng-app to rather than creating individual e.g. jsfiddle.net/3dg7p72d — Sumit Deshpande
– Sumit Deshpande, Commented Feb 26, 2016 at 16:19

maurycy · Accepted Answer · 2016-02-26 16:20:45Z

Angularjs will bootstrap only the first occurrence of ng-app, you could bootstrap manually the other two, but multiple apps are most likely to bring you a lot of problems especially with sharing data between controllers and might be a source of duplicated code (formatters, some small common parts) if you want to separate some logic by modules you can do it and inject all of the specific modules into one module i.e.

var app = angular.module('app',['product-selection', 'weight-selection', 'format-selection']);
var product = angular.module('product-selection',[]);
var weight = angular.module('weight-selection',[]);
var format = angular.module('format-selection',[]);

//products
product.controller('product-controller', function($scope){
    $scope.products = ["Brief", "Postkarte", "Infopost", "Büchersendung", "Warensendung", "PZA" ,"Päckchen", "Blindensendung"];
    });

//formats
format.controller('format-controller', function($scope){
  console.log('format')
    $scope.formats = ["Standard", "Kompakt", "Groß", "Maxi", "Maxi bis 2kg"];
    });

//weights
weight.controller('weight-controller', function($scope){
  console.log('weight')
    $scope.weights = ["0-50g", "51-100g", "101-200g", "201-300g"];
});

working plunker http://plnkr.co/edit/Rovgs3Ets6oNtrFlu9hi?p=preview

score 1 · Accepted Answer · 2016-02-26 17:53:26Z

1

From angular docs:

Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead.

You can have multiple controllers in the same module and multiple modules having multiple controllers.

edited Feb 26, 2016 at 17:53

answered Feb 26, 2016 at 16:10

user5085788

1 Comment

maurycy Over a year ago

You can also use only one module with several controllers. That's incorrect, you can use as many modules with as many controllers as you want

Collectives™ on Stack Overflow

AngularJS doesn't work with multiple controllers

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related