AngularJS: ng-include and the scopes

Question

Why if I can't set the value of $scope.myProperty of the controller ExampleCtrl from a html that inside of ng-include. But if I define $scope.myObj.myProperty and in the html I refer like ng-model="myObj.myProp" work fine?

Example:

<div ng-app="MyApp">
    <div ng-controller='ExampleCtrl'>
        <div ng-include="'#inlcude'"></div>
        <!-- THIS DON'T WORK -->
        <p><b>myProperty:</b>{{myProperty}}</p>
        <!-- THIS WORK -->
        <p><b>myObj.myProperty:</b>{{myObj.myProperty}}</p>
    </div>
</div>    
<!-- INCLUDE HTML -->
<div id='include'>
    <input ng-model='myProperty' type='text' />
    <input ng-model='myObj.myProperty' type='text' />
</div>

I understand thet ng-include create a new scope, but why from the html of include I don't see an simple propety of your parent scope?

Thanks

score 1 · Accepted Answer · edited May 23 '17 at 12:27

When the input writes to myProperty it will (at that point) create a property on the child scope. This child scope property hides/shadows the parent property of the same name. Any changes the child makes will be made on the child scope property. The parent scope can not see this new, child scope property – it does not know that this other property exists. It will find its own property when {{myProperty}} is interpolated.

When the other input writes to myObj.myProperty, it follows the prototype chain and writes to the property on the parent scope.

For a much more detailed answer (with lots of pictures), see What are the nuances of scope prototypal / prototypical inheritance in AngularJS?

Thanks! I found your [post](http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs) — Jose Ignacio Larghi, Mar 06 '13 at 20:22

AngularJS: ng-include and the scopes

1 Answers1