Question

Once we have a scope in hand, we can navigate to its root and explore the scope hierarchy.

But is there a direct way to find all the scopes on a page?

Likewise given an HTML element, is there a direct way to find its enclosing scope?

Answer 1

you can see all of the scopes on the page using this CSS selector

.ng-scope { border: 1px solid red; }

and all of the bindings:

.ng-binding { border: 1px solid red; }

You can then retrieve them by converting the DOM element into selector

var selector = angular.element(some_dom_element);

Then use the selector to retrive the scope/controller/injector

var scope = selector.scope();
var controller = selector.controller();
var injector = selector.injector();