Use ng-model in nested Angularjs controller

Question

I have two nested controller in angularjs, and want to use ng-model from outer in inner controller. Suppose this

<div ng-controller='outController'>
    // data.Name : from outer controller
    <div ng-controller='innerController'>
         <input type="text" ng-model='name' ng-init='name=data.Name'>
         {{data.Name}} // display this scope value
    </div>
 </div>

data.Name value display in html page but not bind to name ng-model. How to bind this value to inner ng-model?

see [angular guide](https://docs.angularjs.org/guide/controller#scope-inheritance-example) — Grundy, Aug 16 '15 at 11:29
@Grundy prototypal inheretance could help him to implement the same thing — Pankaj Parkar, Aug 16 '15 at 11:31

score 4 · Accepted Answer · edited May 23 '17 at 12:30

4

You should follow dot rule in this case, so that will allow you to access the parent scope inside the child scope using prototypal inheritance. For using this approach you need to have an object declared in your parent controller like here it should be declared in outController then the inner controller will not create a new one, it will use the existing one using prototypal inheritance

Markup

<div ng-controller='outController'>
    // data.Name : from outer controller
  <div ng-controller='innerController'>
        <input type="text" ng-model='data.Name'>
  </div>
</div>

Code

app.controller('outController', function($scope){
   $scope.data = {};

   //..other code here ..//

})

edited May 23 '17 at 12:30

Community

1
1

answered Aug 16 '15 at 11:28

Pankaj Parkar

134,766
23
234
299

i use and proces name ng-model in outer controller. – Hadi J Aug 16 '15 at 11:31
@hadi its contradiction between what you are saying.and what you written in question.. – Pankaj Parkar Aug 16 '15 at 11:33
@hadi Glad to help you..Thanks :) – Pankaj Parkar Aug 16 '15 at 11:57

Use ng-model in nested Angularjs controller

1 Answers1

Linked