binding not working in nested controller

Question

I'm new to Angular JS.

I have a few questions. Scope seems to be working with my first controller testController but not with my second controller controlspicy.

Why is not letting me print out $scope.greeting ? Shouldn't the binding work because I assigned a controller.

Here's a plunkr link which directs straight to the code.

http://plnkr.co/edit/NbED8vXNiZCqBjobrISa?p=preview

<!DOCTYPE html>
<html ng-app="newtest">

  <head>
    <script data-require="angular.js@*" data-semver="1.3.5" src="https://code.angularjs.org/1.3.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <script src="spicy.js"></script>
  </head>

  <body ng-controller="testController">
    <h1>Hello Plunker! {{message}}</h1>
    <input type="text" name="firstName" ng-model="thetext">
    {{double(thetext)}}
    <h1 ng-controller="controlspicy">new test</h1>
    <h2>{{greeting}}</h2>

  </body>

</html>

script.js

var app = angular.module("newtest", [])
    .controller("testController", ["$scope", function($scope) {

      $scope.message = "hola";

      $scope.double = function(value){
        if (value == null){
          return 0;
        }
        return value*2;
      };

    }]);

spicy.js

var appl = angular.module("thespicy", []) .controller("controlspicy", ["$scope", function($scope){

  $scope.greeting = "hello";

}]);

The other answers seem to get to the heart of why your specific question isn't working, but you will likely run into other issues when using nested controllers when using primitives on `$scope` due to JavaScript Prototype Inheritance. see http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs, and always try to follow the "dot rule" — Claies, Jul 12 '15 at 02:25

Scraph · Accepted Answer · 2015-07-12T02:18:27.293

As previously mentioned by Preston you need to wrap the <h2> inside a tag with ng-controller. There is one more issue however. controlspicy is defined in another module than the one you specify in ng-app. Change angular.module("thespicy", []) in spicy.js to angular.module("newtest").

You should almost never use more than one module in one app. You could however divide it into different sub-modules but if your new to Angular I would recommend using just one module to start with.

To clarify; you should only define a module once by typing angular.module("module_name", []). Notice the [] here. In this array you would put dependencies for the module (if you really wanted the 'thespicy' module you could have included it as a dependency with angular.module("newtest", ['thespicy']). If you later wanted to add a controller to the module you would reference the module with angular.module("module_name") (no []). For example:

// Define a module
angular.module('foo', []);

// Reference the previously defined module 'foo'
angular.module('foo')
.controller('barCtrl', function() { ... });

Here is a working fork of your example: http://plnkr.co/edit/rtUJGeD52ZoatoL3JgwY?p=preview btw.

Preston Van Loon · Answer 2 · 2015-07-12T01:53:41.013

The nested controller only controls inside the scope of the tag. In this case, it only has access to the scope inside of the h1 tag. Try this:

<!DOCTYPE html>
<html ng-app="newtest">

  <head>
    <script data-require="angular.js@*" data-semver="1.3.5" src="https://code.angularjs.org/1.3.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <script src="spicy.js"></script>
  </head>

  <body ng-controller="testController">
    <h1>Hello Plunker! {{message}}</h1>
    <input type="text" name="firstName" ng-model="thetext">
    {{double(thetext)}}
    <div ng-controller="controlspicy">
      <h1>new test</h1>
      <h2>{{greeting}}</h2>
    </div>

  </body>

</html>

Here's a working plunker of your example: http://plnkr.co/edit/gufbBI4i68MGu8FWVfJv?p=preview

I should point out that you didn't include your controller in your main app.

script.js should start like this:

var app = angular.module("newtest", ['thespicy'])

score 0 · Answer 3 · answered Jul 12 '15 at 01:54

You have multiple apps

check this plunkr for working nested controllers

 <div>
  <div ng-controller="testController">
  <h1>Hello Plunker! {{message}}</h1>
  <input type="text" name="firstName" ng-model="thetext">
  {{double(thetext)}}  
  </div>
  <div ng-controller="thespicy">new test
   <h2>{{greeting}}</h2>
  </div>  
</div>

script.js

var app = angular.module("newtest", [])
    .controller("testController", ["$scope", function($scope) {

      $scope.message = "hola";

      $scope.double = function(value){
        if (value == null){
          return 0;
        }
        return value*2;
      };

    }])

    .controller('thespicy', ["$scope", function($scope) {
      $scope.greeting = "Hello";
    }])

binding not working in nested controller

3 Answers3