How do I access the $scope variable in browser's console using AngularJS?

Question

I would like to access my $scope variable in Chrome\'s JavaScript console. How do I do that?

I can neither see $scope nor the name of my mo

Answer 1

To add and enhance the other answers, in the console, enter $($0) to get the element. If it's an Angularjs application, a jQuery lite version is loaded by default.

If you are not using jQuery, you can use angular.element($0) as in:

angular.element($0).scope()

To check if you have jQuery and the version, run this command in the console:

$.fn.jquery

If you have inspected an element, the currently selected element is available via the command line API reference $0. Both Firebug and Chrome have this reference.

However, the Chrome developer tools will make available the last five elements (or heap objects) selected through the properties named $0, $1, $2, $3, $4 using these references. The most recently selected element or object can be referenced as $0, the second most recent as $1 and so on.

Here is the Command Line API reference for Firebug that lists it's references.

$($0).scope() will return the scope associated with the element. You can see its properties right away.

Some other things that you can use are:

• View an elements parent scope:

$($0).scope().$parent.

• You can chain this too:

$($0).scope().$parent.$parent

• You can look at the root scope:

$($0).scope().$root

• If you highlighted a directive with isolate scope, you can look at it with:

$($0).isolateScope()

See Tips and Tricks for Debugging Unfamiliar Angularjs Code for more details and examples.