How to access parent $scope variable when use ng-include?

Question

My goal is to access parent $scope variable.

This post helps me a lot, however I don't know how to do this in a real case. When I declared controller in child html it throws an error:

areq?p0=ParentController&p1=not a function, got undefined

my project looks like this Plunker

Does this error happens because of nested App declaration?

Answer 1

AngularJS $scope s prototypically inherit from each other. Quoting the wiki :

In AngularJS, a child scope normally prototypically inherits from its parent scope. One exception to this rule is a directive that uses scope: { ... } -- this creates an "isolate" scope that does not prototypically inherit.（and directive with transclusion） This construct is often used when creating a "reusable component" directive. In directives, the parent scope is used directly by default, which means that whatever you change in your directive that comes from the parent scope will also change in the parent scope. If you set scope:true (instead of scope: { ... }), then prototypical inheritance will be used for that directive.

This means that assuming you did not pass scope: { ... } you can access properties on the parent's scope directly.

So for example if the parent scope has a x: 5 property - you can simply access it with $scope.x .