What does the ngModel directive documentation mean exactly? - angularjs

Question

I'm beginner to AngularJs but now I have used and understand how AngularJs works quite a bit.
The thing which I want to ask about is the few lines in the ngModel directive documentation.
These lines are:
Note: ngModel will try to bind to the property given by evaluating the
expression on the current scope. If the property doesn't already exist
on this scope, it will be created implicitly and added to the scope.
I don't understand what they are trying to say. I do know that the ngModel directive binds a property to the input, select and textarea controls. Just like a very simple code below:
Name: <input type="text" ng-model="myName">
{{myName}}
So, can anybody come up with any other precise example which helps me to understand those lines?

Answer 1

ngModel is a standard way that Angular binds a scope property (usually declared in a controller) to the UI.
So, typically, a controller is created with the property declared inside:
angular.controller('Ctrl', function($scope) {
$scope.myProperty = '';
});
And you would bind it to the UI like this:
<div ng-controller="Ctrl">
<input type="text" ng-model="myProperty"/>
</div>
In this example $scope is scoped in the UI on the div element because the ng-controller attribute binds the Ctrl to that element.
However, Angular allows you to be a bit lazy as well and not bother defining the myProperty in the controller:
angular.controller('Ctrl', function($scope) {
});
And still using it in the UI:
<div ng-controller="Ctrl">
<input type="text" ng-model="myProperty"/>
</div>
In this case Angular will implicitly (dynamically) create a myProperty on $scope. That can be used in the UI inside the ng-controller's scope.
This can be used for UI only properties that you don't want to bother the controller about. An example would be when you want to hide/show something based on a user's interaction.
Hope this helps.

Answer 2

You have a controller with a $scope.
You can init your $scope with values(e.g.):
$scope.myName= 'test';
And then you input will have a default value of test.
Name: <input type="text" ng-model="myName">
{{myName}}
You can choose not to init your scope with the value, and then $scope.myName will be created behind the scenes and bound with no default value.

Answer 3

Let's break this down:
Note: ngModel will try to bind to the property given by evaluating the expression
on the current scope. If the property doesn't already exist on this scope, it
will be created implicitly and added to the scope.
1) ngModel will try to bind to the property given by evaluating the expression on the current scope.
So if you have the element:
<input ng-model="theProperty">
This element will have a scope:
var theScope = element.scope()
Most of the times this scope is accessed in a controller constructor... now, let's go back to the statement:
will try to bind to the property given... on the current scope.
Note that it says "try" because it is possible that the current scope contains the property or not. Because angular will do something like this:
theScope['theProperty'] = the_inputs_value;
When the property did not exist, the property gets created. So this explains the next statement.
If the property doesn't already exist on this scope,
it will be created implicitly and added to the scope.