AngularJS 1.3.8 Using multiple controllers, second controller is not working

Question

How do you use multiple controllers for AngularJS 1.3.8?

I've 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>

Birgitbirgitta

Answer 1

You cannot have more than 1 ng-app directive in the same document. You would need to manually bootstrap the other. Other wise only the first instance of ng-app will be bootstrapped automatically by angular.

Other issue is that there is no provider called $scope2, you need to inject $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 your intention is to use just one module and bind other controllers to it. Then just have one ng-app and register your controller to app1.

Create a module:

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

Register a 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>

Whirlabout

Yes, $scope2 was a typo trying to figure out how to make it work. How would you register your controller to app1 while using just one ng-app? – Birgitbirgitta

Did you miss my second demo? If you expand it you will be able to see the code – Whirlabout

Thank you, didn't see it a second ago. Thanks for the two different solutions. Cheers. – Birgitbirgitta

Answer 2

Why not just define 2 controllers for 1 app?

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

Thrall