I found myself puzzled while reading an article on this particular website (pitfall #5):
My query is:
Does this situation resemble having two variables with the same name in plain JavaScript, where one is locally defined (e.g. within a nested function) and one is globally defined (e.g. window.onload), causing the local one to always override the global one?
I grasp that $scope.variable should point to a model containing values, but I'm unsure if it makes a difference if they share the same name regardless of using dot syntax. I'm unclear on how adding a "." dot would impact the OUTPUT VALUE mentioned above. For instance, replacing them with {{user.name}}. How does this recommended practice function?
The code snippet from the website aims to show that if the 2nd {{username}} changes, the 1st {{username}} remains unchanged.
HTML:
<span>Outside Controller: Your name is: {{username}}</span>
<div ng-controller="SignupController">
<span>Inside Controller: Your name is: {{username}}</span>
<fieldset legend="User details">
<input ng-model="username" />
</fieldset>
</div>
JS:
var app = angular.module('app', []);
app.controller('SignupController', function($scope){});