A quick tip for today – how to inspect a scope of any element in an Angular JS application?

Referencing selected DOM elements in browsers’ dev tools

First of all – a simple, not-so-widely know trick to get a reference to a given DOM element in a brower’s developer tools: when you select any element in the DOM tab (called Inspector in Firefox, Elements in Chrome, and DOM Explorer in Edge) you can get refer to it in the console by typing $0.

First, select an element

Then, type in $0 in the console to access it

You can, of course get the element by any other means, as querySelectorAll(), getElementById() or jQuery methods. It’s important to somehow reference the element in question.

Accessing scope of an element

Now, to gain access to the Angular scope associated with the element, we need to wrap it in jqLite or jQuery object. A universal way to do this is to use the angular.element($0) function, but if jQuery is loaded on the page and available for Angular, it’s as simple as $($0).

Lastly, you just need to execute scope() method on the returned wrapper:

Accessing isolated scope

Some elements may have two scopes associated with them – an ‘ordinary’ one and isolated directive scope. The method described above will only allow you to inspect the ordinary scope. To gain access to the isolated one, you’ll have to call .isolateScope() instead of .scope() on a wrapped DOM element. If an isolated scope it not present, this method will just return undefined.