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

Pick an element in the HTML panel of the developer tools and type this in the console

angular.element($0).scope() 

In webkit $0 is a reference to the selected DOM node in the elements tab, so by doing this you get the selected DOM node scope printed out in the console

Addons/Extensions

There are some very useful Chrome Extensions that you might want to checkout:

• Batarang. This has been around for a while.

• ng-inspector. This is the newest one, and as the name suggests, it allows you to inspect your application's scopes.

Playing with JS Fiddle

When working with jsfiddle you can open the fiddle in show mode by adding /show at the end of the url. When running like this you have access to the angular global. You can try it here

http://jsfiddle.net/jaimem/Yatbt/show

jQuery Lite

If you load jQuery before angular, angular.element can be passed a jQuery selector. So you could inspect the scope of a controller with

angular.element('[ng-controller=ctrl]').scope()

Of a button

 angular.element('button:eq(1)').scope()

... and so on.

You might actually want to use a global function to make it easier

window.SC = function(selector){
    return angular.element(selector).scope();
};

Now you could do this

SC('button:eq(10)')
SC('button:eq(10)').row   // -> value of scope.row

check here: http://jsfiddle.net/jaimem/DvRaR/1/show/

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. Assuming you have references to jquery and angular on your page, 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.

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.

just assign a javascript variable to the scope within your controller

var myScope = $scope;

That's it! It works in all browsers.