AngularJS 1.3.8 Using multiple controllers, second controller is not working

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>