1

How can I use two different controllers in the same div element?

How does one access the parent controller model data from inside a child controller?

e.g 

<div ng-controller="abc">
    <div ng-controller="def"><span>{{name}}</span></div>
</div>

Suppose the model name is in controller abc then how does one access its value?

Steve
  • 9,270
  • 5
  • 47
  • 61
  • possible duplicate of [angularjs Access parent scope from child controller](http://stackoverflow.com/questions/21453697/angularjs-access-parent-scope-from-child-controller) – arman1991 Jan 08 '15 at 09:51

2 Answers2

1

AngularJS automatically look up from the first $scope to the parent till the $rootScope to find the property matching name. Thus to answer your question, if the controller def doesn't have a property named name, it is already visible. Otherwise, you should use:

{{$parent.name}}

In your HTML code

Michael
  • 3,308
  • 5
  • 24
  • 36
0

The correct way to do this is by having an alias. See Plunker

In your html it would look like

<div ng-controller="Ctrl as Alias">
    {{Alias.foo}}

In your javascript it would look like

function Ctrl(){
    this.foo = "bar"
}
yangli-io
  • 16,760
  • 8
  • 37
  • 47