Last Updated: February 25, 2016
·
8.616K
· bertrand

Access angularJS scope in browser console

1.
In your Dev Tools browser, select the element that contain your ng-controller property.

2.
Switch to the console and write:
scope = angular.element($0).scope()

3.
Do what you want like:
scope.$apply(function() { scope.myVar= "home"; })

Works in Chrome/Safari/FF

source:
http://www.youtube.com/watch?v=Klqn73uzQao

3 Responses
Add your response

Pretty nice tip, however maybe you would like to take a look to Batarang, a Chrome extension to debug AngularJS applications.

https://github.com/angular/angularjs-batarang

over 1 year ago ·

hi elecash,
i tried Batarang few weeks ago, good extension but i was unable to interact with my angular app..
I don't know if it was the normal behavior or a bug because it's a young extension.

over 1 year ago ·

This is a nice tip, but a bit of a process. batarang seems to still have mixed reviews on the chrome dev store. I just downloaded ng-inspect, a firefox extension, and while I only just grabbed it, it seems to do this same thing loads faster.

Just, for anyone else who ends up here through google like I did.

over 1 year ago ·

Have a fresh tip? Share with Coderwall community!

Post
Post a tip
Did you know?

JavaScript on a page runs with the privileges of that origin. One altered library, tag manager, or snippet can read inputs, change what people see, and call your APIs as the user.

Security insights from Cside