48

How to access the scope variable widgets from chrome's console 

function MyCntrl($scope) {
    $scope.widgets = [
        {text:'Widget #1', datarow:1, datacol:1, datasizex:3, datasizey:3},
        {text:'Widget #2', datarow:2, datacol:1, datasizex:3, datasizey:3},
        {text:'Widget #3', datarow:1, datacol:2, datasizex:3, datasizey:3},
        {text:'Widget #4', datarow:2, datacol:2, datasizex:3, datasizey:3}
    ];

Something like $scope.widgets simply doesn't work in the console!

Tom
  • 1,387
  • 3
  • 19
  • 30
zotherstupidguy
  • 2,976
  • 10
  • 39
  • 59
  • 3
    possible duplicate of [how to access the angular $scope variable in browsers console](http://stackoverflow.com/questions/13743058/how-to-access-the-angular-scope-variable-in-browsers-console) – beauXjames May 29 '14 at 16:21

5 Answers5

34

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();
BraveNewMath
  • 8,090
  • 5
  • 46
  • 51
  • 3
    This becomes even more powerful if you use the magical builtin element selector. Select the element in the dom tree, then evaluate angular.element($0).scope() in the console – LOAS Nov 03 '15 at 08:05
33

The scope is bound to the DOM so you need to grab an element and use some angular code to get the scope.

Your best bet is to get an element that the Controller is bound to and have a look at the scope on that.

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

Community
  • 1
  • 1
Will
  • 655
  • 6
  • 16
  • 7
    Thanks angular.element('[ng-controller=MyCntrl]').scope() did the trick – zotherstupidguy Mar 27 '13 at 16:13
  • 9
    Make sure to call `angular.element('[ng-controller=MyCntrl]').scope().$apply();` if you modify any scope variables in the console this way. Otherwise you won't see the changes. – GFoley83 Jul 17 '13 at 01:18
17

You can either follow the asnwer of Will or install Angular Batarang Chrome extension. This will not only allow you to view and manipulate '$scope' object from, let's say your JavaScript console, but also it's a fundamental tool when developing complex AngularJS apps.

odiseo
  • 6,754
  • 2
  • 20
  • 21
4

Here is one Example: I have following DOM on my angular Single Page application:

<div ng-controller="usersAppController as uac" class="ng-scope">
    <div class="tab ng-scope is-normal is-active" id="rolesTab" ref="tabs" mode="normal" target-ref="rolesContent" xng-locals="xng.userApp.roles">Roles
    </div>
</div>

and this div is present in the controller name usersAppController as uac Above here I have controller as syntax

Also note down that I am using jQuery in my application:

$($0).controller() method will give me a direct access to the uac object which is on the $scope object.

$($0).scope() will give me prototype chain for the element I have selected and if I follow that chain I will find my scope object on that element.

bvmCoder
  • 1,131
  • 9
  • 8
3

You can first select an element from the DOM that's within the scope you want to inspect:

enter image description here

Then you can view the scope object by querying the following in the console:

angular.element($0).scope()

You can query any property on the scope, e.g.:

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

Or you can inspect the controller attached to the scope:

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

Chris Halcrow
  • 28,994
  • 18
  • 176
  • 206
  • Great answer. More details here https://docs.angularjs.org/guide/scope in `Retrieving Scopes from the DOM` section – Alex Aug 25 '23 at 18:09