The initial setup:
<div ng-app="">
<input type="text" ng-model="data.message">
<h1>{{ data.message }}</h1>
<div ng-controller="FirstCtrl">
<input type="text" ng-model="data.message">
<h1>{{ data.message }}</h1>
</div>
<div ng-controller="SecondCtrl">
<input type="text" ng-model="data.message">
<h1>{{ data.message }}</h1>
</div>
</div>
function FirstCtrl($scope) {
}
function SecondCtrl($scope) {
}
In this setup, all three instances of data.message are bound to each other through the first data.message, which is in the scope of the entire application.
If we were to replace the instances of data.message with just message,
<div ng-app="">
<input type="text" ng-model="message">
<h1>{{ message }}</h1>
<div ng-controller="FirstCtrl">
<input type="text" ng-model="message">
<h1>{{ message }}</h1>
</div>
<div ng-controller="SecondCtrl">
<input type="text" ng-model="message">
<h1>{{ message }}</h1>
</div>
</div>
It breaks the scope inheritance that was binding all the data.message instances. Now, each new ng-model of message is creating a new instance of message, and so each model will be an unbound instance.
There's more to learn!