angular child scope can not refer to parent

Question

I am new to angular and try to figure out how scope works.

I assume that the child scope will inherit scope from parent. see angularjs wiki

In AngularJS, a child scope normally prototypically inherits from its parent scope.

So I create some simple test code in pluncker

But when I change scope variable from child scope, it does NOT reflect change to the parent scope?

Why is it? Did I do something wrong?

Answer 1

Scopes inherit a property from its parent only when that property is missing. In your code, when you don't type anything yet, the property is missing and inherited from parent scope, but as you start typing, the property is created on the child scope as a separate property. After creating a property on the child scope, ng-model keeps updating this property on the child scope.

In case you need to bind to parent scope's properties, you could try $parent.out_var1:

<input type="text" ng-model="$parent.out_var1">

DEMO