AngularJS 1.3.8 Using multiple controllers, the second controller does not work

Question

How do you use multiple controllers for AngularJS 1.3.8?

I tried the following below, but only the first controller outputs correctly, and the second controller outputs with {{ name }} and {{ age }} .

HTML:

 <div ng-app="app" ng-controller="Ctrl"> <label>Name:</label> <input ng-model="name"> <label>Age:</label> <input ng-model="age"> <h1>{{ name }}</h1> <h1>{{ age * 2 }}</h1> </div> <div ng-app="app2" ng-controller="Ctrl2"> <label>Name:</label> <input ng-model="name"> <label>Age:</label> <input ng-model="age"> <h1>{{ name }}</h1> <h1>{{ age }}</h1> </div> <script> angular.module('app', []) .controller('Ctrl', ['$scope', function($scope) { $scope.name = "Jason"; $scope.age = "21"; $scope.$watch('name', function(){ // Logs the amount of times name changes console.log($scope.name); }); }]); </script> <script> angular.module('app2', []) .controller('Ctrl2', ['$scope', function($scope) { $scope.name = "John"; $scope.age = "22"; }]); </script> 

Answer 1

There can be no more than 1 ng-app directives in one document. You will need to manually bootstrap another one. Another wise only the first instance of ng-app will automatically load using angular.

Another problem is that there is no provider named $scope2 , you need to enter $scope .

Example: -

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script> <div ng-app="app" ng-controller="Ctrl"> <label>Name:</label> <input ng-model="name"> <label>Age:</label> <input ng-model="age"> <h1>{{ name }}</h1> <h1>{{ age * 2 }}</h1> </div> <div id="app2" ng-controller="Ctrl2"> <label>Name:</label> <input ng-model="name"> <label>Age:</label> <input ng-model="age"> <h1>{{ name }}</h1> <h1>{{ age }}</h1> </div> <script> angular.module('app', []) .controller('Ctrl', ['$scope', function($scope) { $scope.name = "Jason"; $scope.age = "21"; $scope.$watch('name', function() { // Logs the amount of times name changes console.log($scope.name); }); } ]); </script> <script> angular.module('app2', []) .controller('Ctrl2', ['$scope', function($scope) { $scope.name = "John"; $scope.age = "22"; } ]); angular.element(document).ready(function() { angular.bootstrap(document.getElementById('app2'), ['app2']); }); </script> 

Demo

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script> <div ng-app="app" ng-controller="Ctrl"> <label>Name:</label> <input ng-model="name"> <label>Age:</label> <input ng-model="age"> <h1>{{ name }}</h1> <h1>{{ age * 2 }}</h1> </div> <div id="app2" ng-controller="Ctrl2"> <label>Name:</label> <input ng-model="name"> <label>Age:</label> <input ng-model="age"> <h1>{{ name }}</h1> <h1>{{ age }}</h1> </div> <script> angular.module('app', []) .controller('Ctrl', ['$scope', function($scope) { $scope.name = "Jason"; $scope.age = "21"; $scope.$watch('name', function() { // Logs the amount of times name changes console.log($scope.name); }); } ]); </script> <script> angular.module('app2', []) .controller('Ctrl2', ['$scope', function($scope) { $scope.name = "John"; $scope.age = "22"; } ]); angular.element(document).ready(function() { angular.bootstrap(document.getElementById('app2'), ['app2']); }); </script> 

If you intend to use only one module and bind other controllers to it. Then just run ng-app and register the controller on app1 .

Create a module:

  angular.module('app', []); 

Register the controller:

  angular.module('app').controller('Ctrl1', ctor); 

Demo

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script> <div ng-app="app"> <div ng-controller="Ctrl"> <label>Name:</label> <input ng-model="name"> <label>Age:</label> <input ng-model="age"> <h1>{{ name }}</h1> <h1>{{ age * 2 }}</h1> </div> <div ng-controller="Ctrl2"> <label>Name:</label> <input ng-model="name"> <label>Age:</label> <input ng-model="age"> <h1>{{ name }}</h1> <h1>{{ age }}</h1> </div> </div> <script> angular.module('app', []) .controller('Ctrl', ['$scope', function($scope) { $scope.name = "Jason"; $scope.age = "21"; $scope.$watch('name', function() { // Logs the amount of times name changes console.log($scope.name); }); } ]).controller('Ctrl2', ['$scope', function($scope) { $scope.name = "John"; $scope.age = "22"; } ]);; </script> 

Answer 2

Why not just define 2 controllers for 1 application?

 <!DOCTYPE html> <html> <head> <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> </head> <body ng-app="myApp" > <p>Person</p> <div ng-controller="myCtrl"> First name <input type="text" ng-model="firstName"><br> Last name <input type="text" ng-model="lastName"><br> Birthday <input type="date" ng-model="birthday"><br> {{firstName+' '+lastName}} was born on {{birthday}} </div> <div ng-controller="myCtrl2" ng-init=""> <p>The third result is {{ points[2] }}</p> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.firstName= "John"; $scope.lastName= "Doe"; $scope.birthday= new Date(); }); app.controller('myCtrl2', function($scope) { $scope.points=[1,15,19,2,40]; }); </script> </body> </html>