What is the difference with using a "dot" in angularjs?

Question

Here are two pieces of code:

<input type="text" ng-model="data.message"> <div>Hello, {{data.message}}</div> <div ng-controller="firstCtrl"> <input type="text" ng-model="data.message"> <div>Hello, {{data.message}}</div> </div> <div ng-controller="secondCtrl"> <input type="text" ng-model="data.message"> <div>Hello, {{data.message}}</div> </div> 

and

 <input type="text" ng-model="msg"> <div>Hello, {{msg}}</div> <div ng-controller="firstCtrl"> <input type="text" ng-model="msg"> <div>Hello, {{msg}}</div> </div> <div ng-controller="secondCtrl"> <input type="text" ng-model="msg"> <div>Hello, {{msg}}</div> </div> 

ng-controller here creates a new scope, so the firstCtrl and secondCtrl prototypically inherited from the root area in both cases. Thus, ideally, when the property of the children is overwritten, this is the shadows inherited value from the parent, and the value in the parent state remains the same. Then why do two fragments work differently?

Also, why in the first fragment, changing the value in firstCtrl also changes the value in the root area?

Plnkr: http://plnkr.co/edit/x4LH4JAOMr9I8bCcSO8Y?p=preview

Answer 1

dot used to synchronize controllers, so updating a property in one model will cause the property in other controllers to also be updated.

In the second snippet, you rewrite the scope.

see this video that explains it beautifully.