AngularJS which scope does an ng-model point to?

Question

Still training myself to think In angularian...

I think that it would it be correct if I think of the ng-model attribute as a reference to some data element in some parent scope... [would it?]

I am trying to understand to which scope will an ng-model point to...

So basically if I have something like:

<body ng-app="myApp">
    <input ng-model="name">
    {{name}}
</body>

the data for name would be part of the scope set up by the ng-app (as it is the only scope available?

What would happen if I will wrap the input with a <div ng-scope>? On which scope would it then be stored?

Can expect the binding to stop working because the name would then be stored on the scope for this div?

and finally what would happen if I add would change it further to look like this:

<body ng-app="myApp" ng-model="name">
    <div ng-scope>  
       <input ng-model="name">
    </div>
    {{name}}
</body>

What is the process used to resolve on which scope will the data for a ng-model be stored?

https://github.com/angular/angular.js/wiki/Understanding-Scopes this is best documantation for scope it will help you to understand how scope is working... — Poyraz Yilmaz, Mar 12 '14 at 08:12
I understand all the issue with prototypical inheritance between scopes. What I am missing is to which scope will an ng-model refer to... or "use" ? are you saying that it will alway call upon the nearest scope and then prototypical inheritance kicks in? [as long as no isolated scopes are involved...] ? — epeleg, Mar 12 '14 at 08:20
it can refer to current scope or parent scope depends on situation... use chrome batarang plugin to watch your scope which can help you to observe scopes, when they will created which part of the html binded to which controller... hope it can help... — Poyraz Yilmaz, Mar 12 '14 at 08:30

score 1 · Answer 1 · answered Mar 12 '14 at 08:14

ng-model always points to the scope of some controller.

Here is a demonstration with an example.

<div ng-controller="MyController">  
  Your name:  
  <input type="text" ng-model="username">  
  <hr>  
  {{username}}  
</div>

Here ng-model - "username" points to a scope which is under controller "MyController".

Hope it will help you to make the logic clear. Feel free to correct me if I am wrong or missing something.

score 1 · Answer 2 · answered Mar 12 '14 at 08:22

1

I agree with Manish Gupta, but I want just to complete:

In your example, you don't use any controller, so your model is attached to $rootScope.

answered Mar 12 '14 at 08:22

2 Answers2