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

To improve on jm's answer...

// Access whole scope
angular.element(myDomElement).scope();

// Access and change variable in scope
angular.element(myDomElement).scope().myVar = 5;
angular.element(myDomElement).scope().myArray.push(newItem);

// Update page to reflect changed variables
angular.element(myDomElement).scope().$apply();

Or if you're using jQuery, this does the same thing...

$('#elementId').scope();
$('#elementId').scope().$apply();

Another easy way to access a DOM element from the console (as jm mentioned) is to click on it in the 'elements' tab, and it automatically gets stored as $0.

angular.element($0).scope();

If you have installed Batarang

Then you can just write:

$scope

when you have the element selected in the elements view in chrome. Ref - https://github.com/angular/angularjs-batarang#console

Somewhere in your controller (often the last line is a good place), put

console.log($scope);

If you want to see an inner/implicit scope, say inside an ng-repeat, something like this will work.

<li ng-repeat="item in items">
   ...
   <a ng-click="showScope($event)">show scope</a>
</li>

Then in your controller

function MyCtrl($scope) {
    ...
    $scope.showScope = function(e) {
        console.log(angular.element(e.srcElement).scope());
    }
}

Note that above we define the showScope() function in the parent scope, but that's okay... the child/inner/implicit scope can access that function, which then prints out the scope based on the event, and hence the scope associated with the element that fired the event.

@jm-'s suggestion also works, but I don't think it works inside a jsFiddle. I get this error on jsFiddle inside Chrome:

> angular.element($0).scope()
ReferenceError: angular is not defined

This is a way of getting at scope without Batarang, you can do:

var scope = angular.element('#selectorId').scope();

Or if you want to find your scope by controller name, do this:

var scope = angular.element('[ng-controller=myController]').scope();

After you make changes to your model, you'll need to apply the changes to the DOM by calling:

scope.$apply();

I agree the best is Batarang with it's $scope after selecting an object (it's the same as angular.element($0).scope() or even shorter with jQuery: $($0).scope() (my favorite))

Also, if like me you have you main scope on the body element, a $('body').scope() works fine.

One caveat to many of these answers: if you alias your controller your scope objects will be in an object within the returned object from scope().

For example, if your controller directive is created like so: <div ng-controller="FormController as frm"> then to access a startDate property of your controller, you would call angular.element($0).scope().frm.startDate

I usually use jQuery data() function for that:

$($0).data().$scope

The $0 is currently selected item in chrome DOM inspector. $1, $2 .. and so on are previously selected items.

Inspect the element, then use this in the console

s = $($0).scope()
// `s` is the scope object if it exists

Say you want to access the scope of the element like

<div ng-controller="hw"></div>

You could use the following in the console:

angular.element(document.querySelector('[ng-controller=hw]')).scope();

This will give you the scope at that element.

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.

Just assign $scope as a global variable. Problem solved.

app.controller('myCtrl', ['$scope', '$http', function($scope, $http) {
    window.$scope = $scope;
}

We actually need $scope more often in development than in production.

Mentioned already by @JasonGoemaat but adding it as a suitable answer to this question.