Why $scope.variable in ChildController is not resolving to the $scope.variable in ParentController

Question

Why in this jsfiddle $scope.counter inside ChildController3 do not resolve to ParenctController 's $scope.counter but creates a counter on local $scope ?

Replicating Code:

HTML

<div ng-app='app'>
   <div ng-controller="ParentController">    
       <h2>ChildController1</h2>
        <div ng-controller="ChildController1">
            <button ng-click="add()">Add</button>
            <button ng-click="subtract()">Subtract</button>
        </div>
       <h2>ChildController2</h2>
       <div ng-controller="ChildController2">
            <button ng-click="add()">Add</button>
            <button ng-click="subtract()">Subtract</button>
           <br/>
            {{ counter }} <- this is in local scope
        </div>
        {{ counter }} <- this is in parent scope
       <h2>ChildController3</h2>
        <div ng-controller="ChildController3">            
            <button ng-click="add()">Add</button>
            <button ng-click="subtract()">Subtract</button>
            <br/>
            {{ counter }} <- this is in local scope
        </div> 

    </div>
</div>

JS

var app = angular.module("app",[]);
app.controller('ParentController', function($scope) 
            {
               $scope.counter = 5;
            });

app.controller('ChildController1', function ($scope) {

            $scope.add = function () { 
                 $scope.counter += 1; 
            };
            $scope.subtract = function () { 
                $scope.counter -= 1;
            };
        });

app.controller('ChildController2',function($scope) {

            $scope.add = function () { 
                $scope.$parent.counter += 1; 
            };
            $scope.subtract = function () { 
                $scope.$parent.counter -= 1;
            };
        });

app.controller('ChildController3', function($scope) {

            $scope.add = function () { 
                $scope.counter += 1; 
            };
            $scope.subtract = function () { 
                $scope.counter -= 1;
            };
        });

Answer 1

try this:

<div ng-app='app'>
   <div ng-controller="ParentController">    
       <h2>ChildController1</h2>
        <div ng-controller="ChildController1">
            <button ng-click="add()">Add</button>
            <button ng-click="subtract()">Subtract</button>
        </div>
       <h2>ChildController2</h2>
       <div ng-controller="ChildController2">
            <button ng-click="add()">Add</button>
            <button ng-click="subtract()">Subtract</button>
           <br/>
            {{ number.counter }} <- this is in local scope
        </div>
        {{ number.counter }} <- this is in parent scope
       <h2>ChildController3</h2>
        <div ng-controller="ChildController3">            
            <button ng-click="add()">Add</button>
            <button ng-click="subtract()">Subtract</button>
            <br/>
            {{ number.counter }} <- this is in local scope
        </div> 

    </div>
</div>


var app = angular.module("app",[]);
app.controller('ParentController', function($scope) 
            {
                $scope.number = {};
                $scope.number.counter = 5;
            });

app.controller('ChildController1', function ($scope) {

            $scope.add = function () { 
                 $scope.number.counter += 1; 
            };
            $scope.subtract = function () { 
                $scope.number.counter -= 1;
            };
        });

app.controller('ChildController2',function($scope) {

            $scope.add = function () { 
                $scope.$parent.number.counter += 1; 
            };
            $scope.subtract = function () { 
                $scope.$parent.number.counter -= 1;
            };
        });

app.controller('ChildController3', function($scope) {

            $scope.add = function () { 
                $scope.number.counter += 1; 
            };
            $scope.subtract = function () { 
                $scope.number.counter -= 1;
            };
        });

This happens because you´re overwriting your $scope.counter inside 'ChildController3'.

here, see this video at 30 min to see a better explanation about this: AngularJS MTV Meetup: Best Practices

What happened here to make it work was because you declared "$scope.number = {};" inside "ParentController", so when you use it "$scope.number.counter" inside "ChildController3" you made a reference to ParentController instead of before when you just overwrote "$scope.counter" inside of "ChildController3".

Answer 2

Its because the scopes of different levels in the hierarchy share scope using prototypical inheritance.

A pure JS example would be:

function A(){
    this.count = 5;
}

function B(){       
}

a = new A();
B.prototype = a;
b = new B();

console.log(a.count,b.count); // gives 5 5    <--- shared

a.count++;

console.log(a.count,b.count);  // give 6 6    <----- still shared

b.count++;

console.log(a.count,b.count); // gives 6 7   <----- link broken

a.count++;

The link is broken because after "b.count++;" b really has a count property, before that it was just a prototype property.

More info on this can be found here: Angular scope docs