Angular Zen
And the view code is as follows:
<body ng-app ng-init="name='World'">
<h1>Hello, {{name}}</h1>
<div ng-controller="HelloCtrl">
Say hello to: <input type="text" ng-model="name">
<h2>Hello, {{name}}!</h2>
</div>
</body>If you try to run this code, you will observe that the name variable is visible
across the whole application; even if it was defined on the top-most scope only!
This illustrates that variables are inherited down the scope hierarchy. In other
words, variables defined on a parent scope are accessible in child scopes.
Now, let's observe what will happen if we start to type text into the box,
as shown in the following screenshot:
You might be a bit surprised to see that a new variable was created in the scope
initialized by the HelloCtrl controller, instead of changing a value set up on the
$rootScope instance. This behavior becomes less surprising when we realize
that scopes prototypically inherit from each other. All the rules that apply to the
prototypical inheritance of objects in JavaScript apply equally to scopes prototypical
inheritance. Scopes are just JavaScript objects after all.