current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:
up vote 22 down vote favorite
5

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 doesnt work in the console!

share|improve this question
2  
possible duplicate of how to access the angular $scope variable in browsers console – beauXjames May 29 '14 at 16:21
up vote 20 down vote accepted

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 to access the angular $scope variable in browsers console

share|improve this answer
6  
Thanks angular.element('[ng-controller=MyCntrl]').scope() did the trick – babydudecoder Mar 27 '13 at 16:13
6  
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 1:18
up vote 13 down vote

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.

share|improve this answer
up vote 8 down vote

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();
share|improve this answer
1  
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 3 at 8:05

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.