How to access controller's scope from a twice or thrice nested ng-repeat scope?

Question

I don't really think I can elucidate much more than I already have in the title, it's a fairly self-descriptive question.

Say I have this structure:

<div ng-repeat="type in types">
  <div ng-repeat="subtype in type.subtypes">
    <div ng-repeat="item in subtype.items">
        <span>How to access Controller scope here?</span>
    </div>
  </div>
</div>

Inside the span, how can I access the original scope on the controller?

In Knockout, you can do $parents[i] where i is however many scopes you want to step back up in. I haven't seen a reference to that being possible with Angular.

Do I really have to call $parent.$parent.$parent?

The `ngRepeat` scopes all inherit from their parent so you can still access scoped properties at any level. — Phil, Aug 24 '15 at 03:22
What happens if you have conflicting properties in different scopes? Which gets picked? — marked-down, Aug 24 '15 at 03:24
Refer http://stackoverflow.com/questions/31838265/what-can-be-the-reason-to-use-controlleras-property/31838639#31838639 — Darshan Patel, Aug 24 '15 at 03:33
As you know, angular scope does work on prototypical inheritance. In your case all three ngRepeat inherit scope from parent controller So still you can access the properties at any level. There can be issue if you have nested controllers with same properties but that can be solved by controllerAs — Mohan Singh, Aug 24 '15 at 03:41

score 2 · Accepted Answer · answered Aug 24 '15 at 03:29

Do I really have to call $parent.$parent.$parent?

No:

<div ng-repeat="type in types">
  <div ng-repeat="subtype in type.subtypes">
    <div ng-repeat="item in subtype.items">
        {{type}} {{subtype}} {{item}}
    </div>
  </div>
</div>

They all inherit from the top-level scope.

If you're worried about conflicting namespaces, checkout the controllerAs syntax:

<div ng-controller="ParentCtrl as parent">
    {{parent.property}}
  <div ng-controller="ChildCtrl as child">
    {{parent.property}}
    {{child.property}}
  </div>
</div>

What happens if you have conflicting properties in different scopes? Which gets picked?

The one at the lowest level.

How to access controller's scope from a twice or thrice nested ng-repeat scope?

1 Answers1