In AngularJS, how do you find all the scopes on a page?

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();