How do I access the $scope variable in browser's console using AngularJS? Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern) Data science time! April 2019 and salary with experience The Ask Question Wizard is Live!AngularJS : How to edit $scope from the console?Can I manually modify a variable of a JavaScript object at runtime?How can I access Angular functions client side in the browser console?$scope and VM are undefined In console - Why?How to access $scope variable in angular from chrome consoleAngularjs service callback to update scope of controllerAngular controller scope not updating after jQuery ajax callWhy my scope is undefined?ondragstart, ondragover,onstart - $scope is not definedHow to access the *angular 2* components' data in the browser's console?How does data binding work in AngularJS?'this' vs $scope in AngularJS controllersAngularJS : Prevent error $digest already in progress when calling $scope.$apply()What are the nuances of scope prototypal / prototypical inheritance in AngularJS?What is the difference between '@' and '=' in directive scope in AngularJS?When writing a directive in AngularJS, how do I decide if I need no new scope, a new child scope, or a new isolated scope?How do I use $scope.$watch and $scope.$apply in AngularJS?How can I test an AngularJS service from the console?How to access parent scope from within a custom directive *with own scope* in AngularJS?AngularJS access parent scope from child controller

Do I really need recursive chmod to restrict access to a folder?

Why didn't Eitri join the fight?

Is safe to use va_start macro with this as parameter?

Irreducible of finite Krull dimension implies quasi-compact?

Can anything be seen from the center of the Boötes void? How dark would it be?

How to react to hostile behavior from a senior developer?

また usage in a dictionary

Circuit to "zoom in" on mV fluctuations of a DC signal?

Is the Standard Deduction better than Itemized when both are the same amount?

Is it cost-effective to upgrade an old-ish Giant Escape R3 commuter bike with entry-level branded parts (wheels, drivetrain)?

What is homebrew?

Why are both D and D# fitting into my E minor key?

How would a mousetrap for use in space work?

Using audio cues to encourage good posture

Can a party unilaterally change candidates in preparation for a General election?

How to Make a Beautiful Stacked 3D Plot

In what way is everyone not a utilitarian

Can melee weapons be used to deliver Contact Poisons?

Is it fair for a professor to grade us on the possession of past papers?

Is it ethical to give a final exam after the professor has quit before teaching the remaining chapters of the course?

Fundamental Solution of the Pell Equation

Dating a Former Employee

Crossing US/Canada Border for less than 24 hours

Where are Serre’s lectures at Collège de France to be found?



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



Announcing the arrival of Valued Associate #679: Cesar Manara
Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern)
Data science time! April 2019 and salary with experience
The Ask Question Wizard is Live!AngularJS : How to edit $scope from the console?Can I manually modify a variable of a JavaScript object at runtime?How can I access Angular functions client side in the browser console?$scope and VM are undefined In console - Why?How to access $scope variable in angular from chrome consoleAngularjs service callback to update scope of controllerAngular controller scope not updating after jQuery ajax callWhy my scope is undefined?ondragstart, ondragover,onstart - $scope is not definedHow to access the *angular 2* components' data in the browser's console?How does data binding work in AngularJS?'this' vs $scope in AngularJS controllersAngularJS : Prevent error $digest already in progress when calling $scope.$apply()What are the nuances of scope prototypal / prototypical inheritance in AngularJS?What is the difference between '@' and '=' in directive scope in AngularJS?When writing a directive in AngularJS, how do I decide if I need no new scope, a new child scope, or a new isolated scope?How do I use $scope.$watch and $scope.$apply in AngularJS?How can I test an AngularJS service from the console?How to access parent scope from within a custom directive *with own scope* in AngularJS?AngularJS access parent scope from child controller



.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;








1185















I would like to access my $scope variable in Chrome's JavaScript console. How do I do that?



I can neither see $scope nor the name of my module myapp in the console as variables.










share|improve this question



















  • 82





    For debugging I usually set window.MY_SCOPE = $scope; first thing in my controller function.

    – Jason Goemaat
    May 31 '13 at 1:23






  • 5





    If you're considering development/testing in Firefox, you can also use AngScope, a small extension that displays $scope objects of selected DOM elements into Firebug's DOM Inspector.

    – Kos Prov
    Jan 15 '14 at 14:13











  • @JasonGoemaat why not use window.$scope = $scope; so that you can simply use $scope rather than MY_SCOPE - I haven't noticed any problems but maybe i'm missing a security concern or something.

    – James Gentes
    Jun 5 '15 at 15:53






  • 7





    Just for clarity, someone new to angular might get confused and think that $scope was magically available in the console if the just saw it being used that way. Also if you then mistakenly use scope in a directive declaration and $scope in the code for instance, you'd be using that on the window object instead of getting an error.

    – Jason Goemaat
    Jun 5 '15 at 18:35

















1185















I would like to access my $scope variable in Chrome's JavaScript console. How do I do that?



I can neither see $scope nor the name of my module myapp in the console as variables.










share|improve this question



















  • 82





    For debugging I usually set window.MY_SCOPE = $scope; first thing in my controller function.

    – Jason Goemaat
    May 31 '13 at 1:23






  • 5





    If you're considering development/testing in Firefox, you can also use AngScope, a small extension that displays $scope objects of selected DOM elements into Firebug's DOM Inspector.

    – Kos Prov
    Jan 15 '14 at 14:13











  • @JasonGoemaat why not use window.$scope = $scope; so that you can simply use $scope rather than MY_SCOPE - I haven't noticed any problems but maybe i'm missing a security concern or something.

    – James Gentes
    Jun 5 '15 at 15:53






  • 7





    Just for clarity, someone new to angular might get confused and think that $scope was magically available in the console if the just saw it being used that way. Also if you then mistakenly use scope in a directive declaration and $scope in the code for instance, you'd be using that on the window object instead of getting an error.

    – Jason Goemaat
    Jun 5 '15 at 18:35













1185












1185








1185


454






I would like to access my $scope variable in Chrome's JavaScript console. How do I do that?



I can neither see $scope nor the name of my module myapp in the console as variables.










share|improve this question
















I would like to access my $scope variable in Chrome's JavaScript console. How do I do that?



I can neither see $scope nor the name of my module myapp in the console as variables.







angularjs angularjs-scope






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Jan 7 '17 at 15:27









Peter Mortensen

13.9k1987114




13.9k1987114










asked Dec 6 '12 at 11:52









murtaza52murtaza52

20.9k2664110




20.9k2664110







  • 82





    For debugging I usually set window.MY_SCOPE = $scope; first thing in my controller function.

    – Jason Goemaat
    May 31 '13 at 1:23






  • 5





    If you're considering development/testing in Firefox, you can also use AngScope, a small extension that displays $scope objects of selected DOM elements into Firebug's DOM Inspector.

    – Kos Prov
    Jan 15 '14 at 14:13











  • @JasonGoemaat why not use window.$scope = $scope; so that you can simply use $scope rather than MY_SCOPE - I haven't noticed any problems but maybe i'm missing a security concern or something.

    – James Gentes
    Jun 5 '15 at 15:53






  • 7





    Just for clarity, someone new to angular might get confused and think that $scope was magically available in the console if the just saw it being used that way. Also if you then mistakenly use scope in a directive declaration and $scope in the code for instance, you'd be using that on the window object instead of getting an error.

    – Jason Goemaat
    Jun 5 '15 at 18:35












  • 82





    For debugging I usually set window.MY_SCOPE = $scope; first thing in my controller function.

    – Jason Goemaat
    May 31 '13 at 1:23






  • 5





    If you're considering development/testing in Firefox, you can also use AngScope, a small extension that displays $scope objects of selected DOM elements into Firebug's DOM Inspector.

    – Kos Prov
    Jan 15 '14 at 14:13











  • @JasonGoemaat why not use window.$scope = $scope; so that you can simply use $scope rather than MY_SCOPE - I haven't noticed any problems but maybe i'm missing a security concern or something.

    – James Gentes
    Jun 5 '15 at 15:53






  • 7





    Just for clarity, someone new to angular might get confused and think that $scope was magically available in the console if the just saw it being used that way. Also if you then mistakenly use scope in a directive declaration and $scope in the code for instance, you'd be using that on the window object instead of getting an error.

    – Jason Goemaat
    Jun 5 '15 at 18:35







82




82





For debugging I usually set window.MY_SCOPE = $scope; first thing in my controller function.

– Jason Goemaat
May 31 '13 at 1:23





For debugging I usually set window.MY_SCOPE = $scope; first thing in my controller function.

– Jason Goemaat
May 31 '13 at 1:23




5




5





If you're considering development/testing in Firefox, you can also use AngScope, a small extension that displays $scope objects of selected DOM elements into Firebug's DOM Inspector.

– Kos Prov
Jan 15 '14 at 14:13





If you're considering development/testing in Firefox, you can also use AngScope, a small extension that displays $scope objects of selected DOM elements into Firebug's DOM Inspector.

– Kos Prov
Jan 15 '14 at 14:13













@JasonGoemaat why not use window.$scope = $scope; so that you can simply use $scope rather than MY_SCOPE - I haven't noticed any problems but maybe i'm missing a security concern or something.

– James Gentes
Jun 5 '15 at 15:53





@JasonGoemaat why not use window.$scope = $scope; so that you can simply use $scope rather than MY_SCOPE - I haven't noticed any problems but maybe i'm missing a security concern or something.

– James Gentes
Jun 5 '15 at 15:53




7




7





Just for clarity, someone new to angular might get confused and think that $scope was magically available in the console if the just saw it being used that way. Also if you then mistakenly use scope in a directive declaration and $scope in the code for instance, you'd be using that on the window object instead of getting an error.

– Jason Goemaat
Jun 5 '15 at 18:35





Just for clarity, someone new to angular might get confused and think that $scope was magically available in the console if the just saw it being used that way. Also if you then mistakenly use scope in a directive declaration and $scope in the code for instance, you'd be using that on the window object instead of getting an error.

– Jason Goemaat
Jun 5 '15 at 18:35












18 Answers
18






active

oldest

votes


















1683














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



angular.element($0).scope()


In WebKit and Firefox, $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.



You can also target the scope by element ID, like so:



angular.element(document.getElementById('yourElementId')).scope()


Addons/Extensions



There are some very useful Chrome extensions that you might want to check out:



  • 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 jsFiddle



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 AngularJS, 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/






share|improve this answer

























  • Thanks. When I try to install Batarang it tells me your computer is not supported , I have ubuntu, any ideas ?

    – murtaza52
    Dec 6 '12 at 13:07











  • @jm- as of angular.element($0).scope(), it works until you try to call some methods. I tried, and for some reason no HTTP requests are possible in this setup?

    – krtek
    Apr 9 '13 at 13:12












  • With chrome in jsfiddle you can get to the show frame with the drop-down at the bottom of the window. Normally it says <top frame> and you want to pick result( fiddle.jsshell.net/ ) to have the console in the context of the running frame.

    – Jason Goemaat
    May 31 '13 at 1:20






  • 34





    Note that if you're disabling the debug info you'll always get undefined using this method. This is intended and can be prevented by.. .well, not disabling the debug info on the $compileProvider

    – Robba
    Mar 18 '15 at 16:18






  • 5





    alternative to angular.element($0).scope(): you could also do $($0).scope()

    – user2954463
    Nov 18 '15 at 19:19


















179














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();





share|improve this answer


















  • 1





    angular contains a subset of jquery, so you can always use the later syntax (if it is correct), i'm not sure it is

    – Pizzaiola Gorgonzola
    Apr 9 '14 at 10:23







  • 2





    I ended up with angular.element(document.body).scope(), thank you!

    – Alex Sorokoletov
    Nov 19 '16 at 3:59


















72














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






share|improve this answer






























    34














    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();





    share|improve this answer




















    • 3





      How does this answer have so many upvotes? You do not need jQuery for this! angular.element is already an element selection method. Stop saying you need jQuery for simple tasks like selecting an element by its id!

      – Tyrsius
      Jun 16 '15 at 23:22







    • 2





      I didn't say you need it. What i am saying is if you already have it there you could use it like this.

      – BraveNewMath
      Jun 17 '15 at 23:58






    • 2





      angular.element already does the thing you are using jQuery for. In fact, if jQuery is available angular.element is a alias for jQuery. You are needlessly complicating your code. angular.element('#selectorId') and angular.element('[ng-controller=myController]') do the same thing, only with less code. You might as well call angular.element('#selectorId'.toString())

      – Tyrsius
      Jun 18 '15 at 2:29







    • 7





      @Tyrsius, perhaps your feedback could be less accusatory and angry and a bit more professional?

      – Tass
      Oct 29 '15 at 14:46






    • 5





      @Tass You are right, I was needlessly rude. I apologize. It is enough to say that the same thing is being done twice.

      – Tyrsius
      Oct 29 '15 at 18:44


















    29














    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







    share|improve this answer
































      10














      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






      share|improve this answer























      • Controller is accessible to view (hence to console) as a property of $scope, named $ctrl by default, independently of whether you rename it using controllerAs or not. I don't understand where you saw a "caveat" in existing answers. Note most of the answers here were provided back when controllerAs was not a common practice.

        – Andrei Gheorghiu
        Jun 14 '17 at 13:43












      • Right. When those answers were given, controllerAs was not common practice, so it was confusing for newbies that may have been following a "cookbook" that was telling them to alias the controller, but then not seeing the properties without using the alias. Things were moving fast two years ago.

        – Michael Blackburn
        Jun 16 '17 at 20:56


















      8














      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.






      share|improve this answer






























        4














        Inspect the element, then use this in the console



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





        share|improve this answer






























          4














          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.






          share|improve this answer






























            4














            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.






            share|improve this answer






























              4














              I've used angular.element($(".ng-scope")).scope(); in the past and it works great. Only good if you have only one app scope on the page, or you can do something like:



              angular.element($("div[ng-controller=controllerName]")).scope(); or angular.element(document.getElementsByClassName("ng-scope")).scope();






              share|improve this answer
































                3














                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.






                share|improve this answer






























                  2














                  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.






                  share|improve this answer




















                  • 1





                    we don't need "document.querySelector" here

                    – Stepan Suvorov
                    May 20 '15 at 14:04


















                  0














                  Put a breakpoint in your code at a somewhere close to a reference to the $scope variable (so that the $scope is in the current 'plain old JavaScript' scope). Then your can inspect the $scope value in the console.






                  share|improve this answer






























                    0














                    in angular we get jquery element by angular.element()....
                    lets c...




                    angular.element().scope();




                    example:



                    <div id=""></div>






                    share|improve this answer






























                      0














                      At the Chrome's console :



                       1. Select the **Elements** tab
                      2. Select the element of your angular's scope. For instance, click on an element <ui-view>, or <div>, or etc.
                      3. Type the command **angular.element($0).scope()** with following variable in the angular's scope


                      Example



                      angular.element($0).scope().a
                      angular.element($0).scope().b


                      Chrome's console
                      enter image description here






                      share|improve this answer
































                        0














                        For only debugging purposes I put this to the start of the controller.



                         window.scope = $scope;

                        $scope.today = new Date();


                        And this is how I use it.



                        enter image description here



                        then delete it when I am done debugging.






                        share|improve this answer






























                          -5














                          Just define a JavaScript variable outside the scope and assign it to your scope in your controller:



                          var myScope;
                          ...
                          app.controller('myController', function ($scope,log) {
                          myScope = $scope;
                          ...


                          That's it! It should work in all browsers (tested at least in Chrome and Mozilla).



                          It is working, and I'm using this method.






                          share|improve this answer




















                          • 2





                            Using global variables is a bad practice, but I guess this is okay in most cases. It's only for debugging after all; But still you have to be careful not to use the same variable name twice.

                            – Pedro Affonso
                            Aug 29 '15 at 12:53






                          • 2





                            It's a bad idea because it requires you to modify the source code. This is annoying even if it's your own code, and impossible if it's something running on another server. Even if you can modify the code, you then have to remember to undo it. So while it may work, it is not the best practice.

                            – Jim Davis
                            Oct 6 '15 at 16:49






                          • 1





                            @JimDavis In general I agree, but there are cases when doing this is useful: By temporarily modifying the sources you can let the code do the things you'd have to do manually again and again. So when the problem feels tricky and the debugging is gonna take long, I modify the code. Undoing the changes is trivial with the right tool (git).

                            – maaartinus
                            Sep 8 '16 at 1:11









                          protected by Pankaj Parkar Nov 11 '15 at 19:10



                          Thank you for your interest in this question.
                          Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).



                          Would you like to answer one of these unanswered questions instead?














                          18 Answers
                          18






                          active

                          oldest

                          votes








                          18 Answers
                          18






                          active

                          oldest

                          votes









                          active

                          oldest

                          votes






                          active

                          oldest

                          votes









                          1683














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



                          angular.element($0).scope()


                          In WebKit and Firefox, $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.



                          You can also target the scope by element ID, like so:



                          angular.element(document.getElementById('yourElementId')).scope()


                          Addons/Extensions



                          There are some very useful Chrome extensions that you might want to check out:



                          • 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 jsFiddle



                          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 AngularJS, 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/






                          share|improve this answer

























                          • Thanks. When I try to install Batarang it tells me your computer is not supported , I have ubuntu, any ideas ?

                            – murtaza52
                            Dec 6 '12 at 13:07











                          • @jm- as of angular.element($0).scope(), it works until you try to call some methods. I tried, and for some reason no HTTP requests are possible in this setup?

                            – krtek
                            Apr 9 '13 at 13:12












                          • With chrome in jsfiddle you can get to the show frame with the drop-down at the bottom of the window. Normally it says <top frame> and you want to pick result( fiddle.jsshell.net/ ) to have the console in the context of the running frame.

                            – Jason Goemaat
                            May 31 '13 at 1:20






                          • 34





                            Note that if you're disabling the debug info you'll always get undefined using this method. This is intended and can be prevented by.. .well, not disabling the debug info on the $compileProvider

                            – Robba
                            Mar 18 '15 at 16:18






                          • 5





                            alternative to angular.element($0).scope(): you could also do $($0).scope()

                            – user2954463
                            Nov 18 '15 at 19:19















                          1683














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



                          angular.element($0).scope()


                          In WebKit and Firefox, $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.



                          You can also target the scope by element ID, like so:



                          angular.element(document.getElementById('yourElementId')).scope()


                          Addons/Extensions



                          There are some very useful Chrome extensions that you might want to check out:



                          • 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 jsFiddle



                          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 AngularJS, 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/






                          share|improve this answer

























                          • Thanks. When I try to install Batarang it tells me your computer is not supported , I have ubuntu, any ideas ?

                            – murtaza52
                            Dec 6 '12 at 13:07











                          • @jm- as of angular.element($0).scope(), it works until you try to call some methods. I tried, and for some reason no HTTP requests are possible in this setup?

                            – krtek
                            Apr 9 '13 at 13:12












                          • With chrome in jsfiddle you can get to the show frame with the drop-down at the bottom of the window. Normally it says <top frame> and you want to pick result( fiddle.jsshell.net/ ) to have the console in the context of the running frame.

                            – Jason Goemaat
                            May 31 '13 at 1:20






                          • 34





                            Note that if you're disabling the debug info you'll always get undefined using this method. This is intended and can be prevented by.. .well, not disabling the debug info on the $compileProvider

                            – Robba
                            Mar 18 '15 at 16:18






                          • 5





                            alternative to angular.element($0).scope(): you could also do $($0).scope()

                            – user2954463
                            Nov 18 '15 at 19:19













                          1683












                          1683








                          1683







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



                          angular.element($0).scope()


                          In WebKit and Firefox, $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.



                          You can also target the scope by element ID, like so:



                          angular.element(document.getElementById('yourElementId')).scope()


                          Addons/Extensions



                          There are some very useful Chrome extensions that you might want to check out:



                          • 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 jsFiddle



                          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 AngularJS, 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/






                          share|improve this answer















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



                          angular.element($0).scope()


                          In WebKit and Firefox, $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.



                          You can also target the scope by element ID, like so:



                          angular.element(document.getElementById('yourElementId')).scope()


                          Addons/Extensions



                          There are some very useful Chrome extensions that you might want to check out:



                          • 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 jsFiddle



                          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 AngularJS, 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/







                          share|improve this answer














                          share|improve this answer



                          share|improve this answer








                          edited Oct 15 '17 at 14:58









                          str

                          18.7k65784




                          18.7k65784










                          answered Dec 6 '12 at 12:56









                          jaimejaime

                          39.8k107551




                          39.8k107551












                          • Thanks. When I try to install Batarang it tells me your computer is not supported , I have ubuntu, any ideas ?

                            – murtaza52
                            Dec 6 '12 at 13:07











                          • @jm- as of angular.element($0).scope(), it works until you try to call some methods. I tried, and for some reason no HTTP requests are possible in this setup?

                            – krtek
                            Apr 9 '13 at 13:12












                          • With chrome in jsfiddle you can get to the show frame with the drop-down at the bottom of the window. Normally it says <top frame> and you want to pick result( fiddle.jsshell.net/ ) to have the console in the context of the running frame.

                            – Jason Goemaat
                            May 31 '13 at 1:20






                          • 34





                            Note that if you're disabling the debug info you'll always get undefined using this method. This is intended and can be prevented by.. .well, not disabling the debug info on the $compileProvider

                            – Robba
                            Mar 18 '15 at 16:18






                          • 5





                            alternative to angular.element($0).scope(): you could also do $($0).scope()

                            – user2954463
                            Nov 18 '15 at 19:19

















                          • Thanks. When I try to install Batarang it tells me your computer is not supported , I have ubuntu, any ideas ?

                            – murtaza52
                            Dec 6 '12 at 13:07











                          • @jm- as of angular.element($0).scope(), it works until you try to call some methods. I tried, and for some reason no HTTP requests are possible in this setup?

                            – krtek
                            Apr 9 '13 at 13:12












                          • With chrome in jsfiddle you can get to the show frame with the drop-down at the bottom of the window. Normally it says <top frame> and you want to pick result( fiddle.jsshell.net/ ) to have the console in the context of the running frame.

                            – Jason Goemaat
                            May 31 '13 at 1:20






                          • 34





                            Note that if you're disabling the debug info you'll always get undefined using this method. This is intended and can be prevented by.. .well, not disabling the debug info on the $compileProvider

                            – Robba
                            Mar 18 '15 at 16:18






                          • 5





                            alternative to angular.element($0).scope(): you could also do $($0).scope()

                            – user2954463
                            Nov 18 '15 at 19:19
















                          Thanks. When I try to install Batarang it tells me your computer is not supported , I have ubuntu, any ideas ?

                          – murtaza52
                          Dec 6 '12 at 13:07





                          Thanks. When I try to install Batarang it tells me your computer is not supported , I have ubuntu, any ideas ?

                          – murtaza52
                          Dec 6 '12 at 13:07













                          @jm- as of angular.element($0).scope(), it works until you try to call some methods. I tried, and for some reason no HTTP requests are possible in this setup?

                          – krtek
                          Apr 9 '13 at 13:12






                          @jm- as of angular.element($0).scope(), it works until you try to call some methods. I tried, and for some reason no HTTP requests are possible in this setup?

                          – krtek
                          Apr 9 '13 at 13:12














                          With chrome in jsfiddle you can get to the show frame with the drop-down at the bottom of the window. Normally it says <top frame> and you want to pick result( fiddle.jsshell.net/ ) to have the console in the context of the running frame.

                          – Jason Goemaat
                          May 31 '13 at 1:20





                          With chrome in jsfiddle you can get to the show frame with the drop-down at the bottom of the window. Normally it says <top frame> and you want to pick result( fiddle.jsshell.net/ ) to have the console in the context of the running frame.

                          – Jason Goemaat
                          May 31 '13 at 1:20




                          34




                          34





                          Note that if you're disabling the debug info you'll always get undefined using this method. This is intended and can be prevented by.. .well, not disabling the debug info on the $compileProvider

                          – Robba
                          Mar 18 '15 at 16:18





                          Note that if you're disabling the debug info you'll always get undefined using this method. This is intended and can be prevented by.. .well, not disabling the debug info on the $compileProvider

                          – Robba
                          Mar 18 '15 at 16:18




                          5




                          5





                          alternative to angular.element($0).scope(): you could also do $($0).scope()

                          – user2954463
                          Nov 18 '15 at 19:19





                          alternative to angular.element($0).scope(): you could also do $($0).scope()

                          – user2954463
                          Nov 18 '15 at 19:19













                          179














                          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();





                          share|improve this answer


















                          • 1





                            angular contains a subset of jquery, so you can always use the later syntax (if it is correct), i'm not sure it is

                            – Pizzaiola Gorgonzola
                            Apr 9 '14 at 10:23







                          • 2





                            I ended up with angular.element(document.body).scope(), thank you!

                            – Alex Sorokoletov
                            Nov 19 '16 at 3:59















                          179














                          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();





                          share|improve this answer


















                          • 1





                            angular contains a subset of jquery, so you can always use the later syntax (if it is correct), i'm not sure it is

                            – Pizzaiola Gorgonzola
                            Apr 9 '14 at 10:23







                          • 2





                            I ended up with angular.element(document.body).scope(), thank you!

                            – Alex Sorokoletov
                            Nov 19 '16 at 3:59













                          179












                          179








                          179







                          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();





                          share|improve this answer













                          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();






                          share|improve this answer












                          share|improve this answer



                          share|improve this answer










                          answered Apr 2 '13 at 4:49









                          Simon EastSimon East

                          34.6k11107103




                          34.6k11107103







                          • 1





                            angular contains a subset of jquery, so you can always use the later syntax (if it is correct), i'm not sure it is

                            – Pizzaiola Gorgonzola
                            Apr 9 '14 at 10:23







                          • 2





                            I ended up with angular.element(document.body).scope(), thank you!

                            – Alex Sorokoletov
                            Nov 19 '16 at 3:59












                          • 1





                            angular contains a subset of jquery, so you can always use the later syntax (if it is correct), i'm not sure it is

                            – Pizzaiola Gorgonzola
                            Apr 9 '14 at 10:23







                          • 2





                            I ended up with angular.element(document.body).scope(), thank you!

                            – Alex Sorokoletov
                            Nov 19 '16 at 3:59







                          1




                          1





                          angular contains a subset of jquery, so you can always use the later syntax (if it is correct), i'm not sure it is

                          – Pizzaiola Gorgonzola
                          Apr 9 '14 at 10:23






                          angular contains a subset of jquery, so you can always use the later syntax (if it is correct), i'm not sure it is

                          – Pizzaiola Gorgonzola
                          Apr 9 '14 at 10:23





                          2




                          2





                          I ended up with angular.element(document.body).scope(), thank you!

                          – Alex Sorokoletov
                          Nov 19 '16 at 3:59





                          I ended up with angular.element(document.body).scope(), thank you!

                          – Alex Sorokoletov
                          Nov 19 '16 at 3:59











                          72














                          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






                          share|improve this answer



























                            72














                            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






                            share|improve this answer

























                              72












                              72








                              72







                              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






                              share|improve this answer













                              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







                              share|improve this answer












                              share|improve this answer



                              share|improve this answer










                              answered Sep 6 '13 at 16:36









                              chrismarxchrismarx

                              5,18055778




                              5,18055778





















                                  34














                                  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();





                                  share|improve this answer




















                                  • 3





                                    How does this answer have so many upvotes? You do not need jQuery for this! angular.element is already an element selection method. Stop saying you need jQuery for simple tasks like selecting an element by its id!

                                    – Tyrsius
                                    Jun 16 '15 at 23:22







                                  • 2





                                    I didn't say you need it. What i am saying is if you already have it there you could use it like this.

                                    – BraveNewMath
                                    Jun 17 '15 at 23:58






                                  • 2





                                    angular.element already does the thing you are using jQuery for. In fact, if jQuery is available angular.element is a alias for jQuery. You are needlessly complicating your code. angular.element('#selectorId') and angular.element('[ng-controller=myController]') do the same thing, only with less code. You might as well call angular.element('#selectorId'.toString())

                                    – Tyrsius
                                    Jun 18 '15 at 2:29







                                  • 7





                                    @Tyrsius, perhaps your feedback could be less accusatory and angry and a bit more professional?

                                    – Tass
                                    Oct 29 '15 at 14:46






                                  • 5





                                    @Tass You are right, I was needlessly rude. I apologize. It is enough to say that the same thing is being done twice.

                                    – Tyrsius
                                    Oct 29 '15 at 18:44















                                  34














                                  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();





                                  share|improve this answer




















                                  • 3





                                    How does this answer have so many upvotes? You do not need jQuery for this! angular.element is already an element selection method. Stop saying you need jQuery for simple tasks like selecting an element by its id!

                                    – Tyrsius
                                    Jun 16 '15 at 23:22







                                  • 2





                                    I didn't say you need it. What i am saying is if you already have it there you could use it like this.

                                    – BraveNewMath
                                    Jun 17 '15 at 23:58






                                  • 2





                                    angular.element already does the thing you are using jQuery for. In fact, if jQuery is available angular.element is a alias for jQuery. You are needlessly complicating your code. angular.element('#selectorId') and angular.element('[ng-controller=myController]') do the same thing, only with less code. You might as well call angular.element('#selectorId'.toString())

                                    – Tyrsius
                                    Jun 18 '15 at 2:29







                                  • 7





                                    @Tyrsius, perhaps your feedback could be less accusatory and angry and a bit more professional?

                                    – Tass
                                    Oct 29 '15 at 14:46






                                  • 5





                                    @Tass You are right, I was needlessly rude. I apologize. It is enough to say that the same thing is being done twice.

                                    – Tyrsius
                                    Oct 29 '15 at 18:44













                                  34












                                  34








                                  34







                                  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();





                                  share|improve this answer















                                  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();






                                  share|improve this answer














                                  share|improve this answer



                                  share|improve this answer








                                  edited Nov 18 '15 at 7:20

























                                  answered Jun 4 '14 at 17:02









                                  BraveNewMathBraveNewMath

                                  5,06623545




                                  5,06623545







                                  • 3





                                    How does this answer have so many upvotes? You do not need jQuery for this! angular.element is already an element selection method. Stop saying you need jQuery for simple tasks like selecting an element by its id!

                                    – Tyrsius
                                    Jun 16 '15 at 23:22







                                  • 2





                                    I didn't say you need it. What i am saying is if you already have it there you could use it like this.

                                    – BraveNewMath
                                    Jun 17 '15 at 23:58






                                  • 2





                                    angular.element already does the thing you are using jQuery for. In fact, if jQuery is available angular.element is a alias for jQuery. You are needlessly complicating your code. angular.element('#selectorId') and angular.element('[ng-controller=myController]') do the same thing, only with less code. You might as well call angular.element('#selectorId'.toString())

                                    – Tyrsius
                                    Jun 18 '15 at 2:29







                                  • 7





                                    @Tyrsius, perhaps your feedback could be less accusatory and angry and a bit more professional?

                                    – Tass
                                    Oct 29 '15 at 14:46






                                  • 5





                                    @Tass You are right, I was needlessly rude. I apologize. It is enough to say that the same thing is being done twice.

                                    – Tyrsius
                                    Oct 29 '15 at 18:44












                                  • 3





                                    How does this answer have so many upvotes? You do not need jQuery for this! angular.element is already an element selection method. Stop saying you need jQuery for simple tasks like selecting an element by its id!

                                    – Tyrsius
                                    Jun 16 '15 at 23:22







                                  • 2





                                    I didn't say you need it. What i am saying is if you already have it there you could use it like this.

                                    – BraveNewMath
                                    Jun 17 '15 at 23:58






                                  • 2





                                    angular.element already does the thing you are using jQuery for. In fact, if jQuery is available angular.element is a alias for jQuery. You are needlessly complicating your code. angular.element('#selectorId') and angular.element('[ng-controller=myController]') do the same thing, only with less code. You might as well call angular.element('#selectorId'.toString())

                                    – Tyrsius
                                    Jun 18 '15 at 2:29







                                  • 7





                                    @Tyrsius, perhaps your feedback could be less accusatory and angry and a bit more professional?

                                    – Tass
                                    Oct 29 '15 at 14:46






                                  • 5





                                    @Tass You are right, I was needlessly rude. I apologize. It is enough to say that the same thing is being done twice.

                                    – Tyrsius
                                    Oct 29 '15 at 18:44







                                  3




                                  3





                                  How does this answer have so many upvotes? You do not need jQuery for this! angular.element is already an element selection method. Stop saying you need jQuery for simple tasks like selecting an element by its id!

                                  – Tyrsius
                                  Jun 16 '15 at 23:22






                                  How does this answer have so many upvotes? You do not need jQuery for this! angular.element is already an element selection method. Stop saying you need jQuery for simple tasks like selecting an element by its id!

                                  – Tyrsius
                                  Jun 16 '15 at 23:22





                                  2




                                  2





                                  I didn't say you need it. What i am saying is if you already have it there you could use it like this.

                                  – BraveNewMath
                                  Jun 17 '15 at 23:58





                                  I didn't say you need it. What i am saying is if you already have it there you could use it like this.

                                  – BraveNewMath
                                  Jun 17 '15 at 23:58




                                  2




                                  2





                                  angular.element already does the thing you are using jQuery for. In fact, if jQuery is available angular.element is a alias for jQuery. You are needlessly complicating your code. angular.element('#selectorId') and angular.element('[ng-controller=myController]') do the same thing, only with less code. You might as well call angular.element('#selectorId'.toString())

                                  – Tyrsius
                                  Jun 18 '15 at 2:29






                                  angular.element already does the thing you are using jQuery for. In fact, if jQuery is available angular.element is a alias for jQuery. You are needlessly complicating your code. angular.element('#selectorId') and angular.element('[ng-controller=myController]') do the same thing, only with less code. You might as well call angular.element('#selectorId'.toString())

                                  – Tyrsius
                                  Jun 18 '15 at 2:29





                                  7




                                  7





                                  @Tyrsius, perhaps your feedback could be less accusatory and angry and a bit more professional?

                                  – Tass
                                  Oct 29 '15 at 14:46





                                  @Tyrsius, perhaps your feedback could be less accusatory and angry and a bit more professional?

                                  – Tass
                                  Oct 29 '15 at 14:46




                                  5




                                  5





                                  @Tass You are right, I was needlessly rude. I apologize. It is enough to say that the same thing is being done twice.

                                  – Tyrsius
                                  Oct 29 '15 at 18:44





                                  @Tass You are right, I was needlessly rude. I apologize. It is enough to say that the same thing is being done twice.

                                  – Tyrsius
                                  Oct 29 '15 at 18:44











                                  29














                                  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







                                  share|improve this answer





























                                    29














                                    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







                                    share|improve this answer



























                                      29












                                      29








                                      29







                                      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







                                      share|improve this answer















                                      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








                                      share|improve this answer














                                      share|improve this answer



                                      share|improve this answer








                                      edited Dec 6 '12 at 22:05

























                                      answered Dec 6 '12 at 21:16









                                      Mark RajcokMark Rajcok

                                      298k93438462




                                      298k93438462





















                                          10














                                          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






                                          share|improve this answer























                                          • Controller is accessible to view (hence to console) as a property of $scope, named $ctrl by default, independently of whether you rename it using controllerAs or not. I don't understand where you saw a "caveat" in existing answers. Note most of the answers here were provided back when controllerAs was not a common practice.

                                            – Andrei Gheorghiu
                                            Jun 14 '17 at 13:43












                                          • Right. When those answers were given, controllerAs was not common practice, so it was confusing for newbies that may have been following a "cookbook" that was telling them to alias the controller, but then not seeing the properties without using the alias. Things were moving fast two years ago.

                                            – Michael Blackburn
                                            Jun 16 '17 at 20:56















                                          10














                                          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






                                          share|improve this answer























                                          • Controller is accessible to view (hence to console) as a property of $scope, named $ctrl by default, independently of whether you rename it using controllerAs or not. I don't understand where you saw a "caveat" in existing answers. Note most of the answers here were provided back when controllerAs was not a common practice.

                                            – Andrei Gheorghiu
                                            Jun 14 '17 at 13:43












                                          • Right. When those answers were given, controllerAs was not common practice, so it was confusing for newbies that may have been following a "cookbook" that was telling them to alias the controller, but then not seeing the properties without using the alias. Things were moving fast two years ago.

                                            – Michael Blackburn
                                            Jun 16 '17 at 20:56













                                          10












                                          10








                                          10







                                          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






                                          share|improve this answer













                                          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







                                          share|improve this answer












                                          share|improve this answer



                                          share|improve this answer










                                          answered Feb 24 '15 at 4:00









                                          Michael BlackburnMichael Blackburn

                                          2,60911818




                                          2,60911818












                                          • Controller is accessible to view (hence to console) as a property of $scope, named $ctrl by default, independently of whether you rename it using controllerAs or not. I don't understand where you saw a "caveat" in existing answers. Note most of the answers here were provided back when controllerAs was not a common practice.

                                            – Andrei Gheorghiu
                                            Jun 14 '17 at 13:43












                                          • Right. When those answers were given, controllerAs was not common practice, so it was confusing for newbies that may have been following a "cookbook" that was telling them to alias the controller, but then not seeing the properties without using the alias. Things were moving fast two years ago.

                                            – Michael Blackburn
                                            Jun 16 '17 at 20:56

















                                          • Controller is accessible to view (hence to console) as a property of $scope, named $ctrl by default, independently of whether you rename it using controllerAs or not. I don't understand where you saw a "caveat" in existing answers. Note most of the answers here were provided back when controllerAs was not a common practice.

                                            – Andrei Gheorghiu
                                            Jun 14 '17 at 13:43












                                          • Right. When those answers were given, controllerAs was not common practice, so it was confusing for newbies that may have been following a "cookbook" that was telling them to alias the controller, but then not seeing the properties without using the alias. Things were moving fast two years ago.

                                            – Michael Blackburn
                                            Jun 16 '17 at 20:56
















                                          Controller is accessible to view (hence to console) as a property of $scope, named $ctrl by default, independently of whether you rename it using controllerAs or not. I don't understand where you saw a "caveat" in existing answers. Note most of the answers here were provided back when controllerAs was not a common practice.

                                          – Andrei Gheorghiu
                                          Jun 14 '17 at 13:43






                                          Controller is accessible to view (hence to console) as a property of $scope, named $ctrl by default, independently of whether you rename it using controllerAs or not. I don't understand where you saw a "caveat" in existing answers. Note most of the answers here were provided back when controllerAs was not a common practice.

                                          – Andrei Gheorghiu
                                          Jun 14 '17 at 13:43














                                          Right. When those answers were given, controllerAs was not common practice, so it was confusing for newbies that may have been following a "cookbook" that was telling them to alias the controller, but then not seeing the properties without using the alias. Things were moving fast two years ago.

                                          – Michael Blackburn
                                          Jun 16 '17 at 20:56





                                          Right. When those answers were given, controllerAs was not common practice, so it was confusing for newbies that may have been following a "cookbook" that was telling them to alias the controller, but then not seeing the properties without using the alias. Things were moving fast two years ago.

                                          – Michael Blackburn
                                          Jun 16 '17 at 20:56











                                          8














                                          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.






                                          share|improve this answer



























                                            8














                                            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.






                                            share|improve this answer

























                                              8












                                              8








                                              8







                                              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.






                                              share|improve this answer













                                              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.







                                              share|improve this answer












                                              share|improve this answer



                                              share|improve this answer










                                              answered Jan 23 '14 at 23:54









                                              DorianDorian

                                              13.4k37889




                                              13.4k37889





















                                                  4














                                                  Inspect the element, then use this in the console



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





                                                  share|improve this answer



























                                                    4














                                                    Inspect the element, then use this in the console



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





                                                    share|improve this answer

























                                                      4












                                                      4








                                                      4







                                                      Inspect the element, then use this in the console



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





                                                      share|improve this answer













                                                      Inspect the element, then use this in the console



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






                                                      share|improve this answer












                                                      share|improve this answer



                                                      share|improve this answer










                                                      answered Dec 7 '15 at 15:54









                                                      geggeg

                                                      2,21212021




                                                      2,21212021





















                                                          4














                                                          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.






                                                          share|improve this answer



























                                                            4














                                                            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.






                                                            share|improve this answer

























                                                              4












                                                              4








                                                              4







                                                              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.






                                                              share|improve this answer













                                                              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.







                                                              share|improve this answer












                                                              share|improve this answer



                                                              share|improve this answer










                                                              answered Aug 2 '16 at 16:41









                                                              James DrinkardJames Drinkard

                                                              9,7631281121




                                                              9,7631281121





















                                                                  4














                                                                  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.






                                                                  share|improve this answer



























                                                                    4














                                                                    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.






                                                                    share|improve this answer

























                                                                      4












                                                                      4








                                                                      4







                                                                      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.






                                                                      share|improve this answer













                                                                      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.







                                                                      share|improve this answer












                                                                      share|improve this answer



                                                                      share|improve this answer










                                                                      answered Nov 1 '16 at 16:26









                                                                      SandeepSandeep

                                                                      20.7k22420




                                                                      20.7k22420





















                                                                          4














                                                                          I've used angular.element($(".ng-scope")).scope(); in the past and it works great. Only good if you have only one app scope on the page, or you can do something like:



                                                                          angular.element($("div[ng-controller=controllerName]")).scope(); or angular.element(document.getElementsByClassName("ng-scope")).scope();






                                                                          share|improve this answer





























                                                                            4














                                                                            I've used angular.element($(".ng-scope")).scope(); in the past and it works great. Only good if you have only one app scope on the page, or you can do something like:



                                                                            angular.element($("div[ng-controller=controllerName]")).scope(); or angular.element(document.getElementsByClassName("ng-scope")).scope();






                                                                            share|improve this answer



























                                                                              4












                                                                              4








                                                                              4







                                                                              I've used angular.element($(".ng-scope")).scope(); in the past and it works great. Only good if you have only one app scope on the page, or you can do something like:



                                                                              angular.element($("div[ng-controller=controllerName]")).scope(); or angular.element(document.getElementsByClassName("ng-scope")).scope();






                                                                              share|improve this answer















                                                                              I've used angular.element($(".ng-scope")).scope(); in the past and it works great. Only good if you have only one app scope on the page, or you can do something like:



                                                                              angular.element($("div[ng-controller=controllerName]")).scope(); or angular.element(document.getElementsByClassName("ng-scope")).scope();







                                                                              share|improve this answer














                                                                              share|improve this answer



                                                                              share|improve this answer








                                                                              edited Dec 13 '16 at 21:23

























                                                                              answered Dec 13 '16 at 21:16









                                                                              MikeMike

                                                                              1,1301423




                                                                              1,1301423





















                                                                                  3














                                                                                  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.






                                                                                  share|improve this answer



























                                                                                    3














                                                                                    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.






                                                                                    share|improve this answer

























                                                                                      3












                                                                                      3








                                                                                      3







                                                                                      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.






                                                                                      share|improve this answer













                                                                                      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.







                                                                                      share|improve this answer












                                                                                      share|improve this answer



                                                                                      share|improve this answer










                                                                                      answered Aug 3 '15 at 20:53









                                                                                      wojtekcwojtekc

                                                                                      3112




                                                                                      3112





















                                                                                          2














                                                                                          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.






                                                                                          share|improve this answer




















                                                                                          • 1





                                                                                            we don't need "document.querySelector" here

                                                                                            – Stepan Suvorov
                                                                                            May 20 '15 at 14:04















                                                                                          2














                                                                                          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.






                                                                                          share|improve this answer




















                                                                                          • 1





                                                                                            we don't need "document.querySelector" here

                                                                                            – Stepan Suvorov
                                                                                            May 20 '15 at 14:04













                                                                                          2












                                                                                          2








                                                                                          2







                                                                                          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.






                                                                                          share|improve this answer















                                                                                          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.







                                                                                          share|improve this answer














                                                                                          share|improve this answer



                                                                                          share|improve this answer








                                                                                          edited Feb 25 '16 at 15:15









                                                                                          Mo.

                                                                                          13.7k29109170




                                                                                          13.7k29109170










                                                                                          answered Sep 3 '14 at 16:24









                                                                                          PraymPraym

                                                                                          1,0841313




                                                                                          1,0841313







                                                                                          • 1





                                                                                            we don't need "document.querySelector" here

                                                                                            – Stepan Suvorov
                                                                                            May 20 '15 at 14:04












                                                                                          • 1





                                                                                            we don't need "document.querySelector" here

                                                                                            – Stepan Suvorov
                                                                                            May 20 '15 at 14:04







                                                                                          1




                                                                                          1





                                                                                          we don't need "document.querySelector" here

                                                                                          – Stepan Suvorov
                                                                                          May 20 '15 at 14:04





                                                                                          we don't need "document.querySelector" here

                                                                                          – Stepan Suvorov
                                                                                          May 20 '15 at 14:04











                                                                                          0














                                                                                          Put a breakpoint in your code at a somewhere close to a reference to the $scope variable (so that the $scope is in the current 'plain old JavaScript' scope). Then your can inspect the $scope value in the console.






                                                                                          share|improve this answer



























                                                                                            0














                                                                                            Put a breakpoint in your code at a somewhere close to a reference to the $scope variable (so that the $scope is in the current 'plain old JavaScript' scope). Then your can inspect the $scope value in the console.






                                                                                            share|improve this answer

























                                                                                              0












                                                                                              0








                                                                                              0







                                                                                              Put a breakpoint in your code at a somewhere close to a reference to the $scope variable (so that the $scope is in the current 'plain old JavaScript' scope). Then your can inspect the $scope value in the console.






                                                                                              share|improve this answer













                                                                                              Put a breakpoint in your code at a somewhere close to a reference to the $scope variable (so that the $scope is in the current 'plain old JavaScript' scope). Then your can inspect the $scope value in the console.







                                                                                              share|improve this answer












                                                                                              share|improve this answer



                                                                                              share|improve this answer










                                                                                              answered May 18 '17 at 2:23









                                                                                              Chris HalcrowChris Halcrow

                                                                                              11.2k47294




                                                                                              11.2k47294





















                                                                                                  0














                                                                                                  in angular we get jquery element by angular.element()....
                                                                                                  lets c...




                                                                                                  angular.element().scope();




                                                                                                  example:



                                                                                                  <div id=""></div>






                                                                                                  share|improve this answer



























                                                                                                    0














                                                                                                    in angular we get jquery element by angular.element()....
                                                                                                    lets c...




                                                                                                    angular.element().scope();




                                                                                                    example:



                                                                                                    <div id=""></div>






                                                                                                    share|improve this answer

























                                                                                                      0












                                                                                                      0








                                                                                                      0







                                                                                                      in angular we get jquery element by angular.element()....
                                                                                                      lets c...




                                                                                                      angular.element().scope();




                                                                                                      example:



                                                                                                      <div id=""></div>






                                                                                                      share|improve this answer













                                                                                                      in angular we get jquery element by angular.element()....
                                                                                                      lets c...




                                                                                                      angular.element().scope();




                                                                                                      example:



                                                                                                      <div id=""></div>







                                                                                                      share|improve this answer












                                                                                                      share|improve this answer



                                                                                                      share|improve this answer










                                                                                                      answered Dec 12 '17 at 9:19









                                                                                                      RizoRizo

                                                                                                      1,270513




                                                                                                      1,270513





















                                                                                                          0














                                                                                                          At the Chrome's console :



                                                                                                           1. Select the **Elements** tab
                                                                                                          2. Select the element of your angular's scope. For instance, click on an element <ui-view>, or <div>, or etc.
                                                                                                          3. Type the command **angular.element($0).scope()** with following variable in the angular's scope


                                                                                                          Example



                                                                                                          angular.element($0).scope().a
                                                                                                          angular.element($0).scope().b


                                                                                                          Chrome's console
                                                                                                          enter image description here






                                                                                                          share|improve this answer





























                                                                                                            0














                                                                                                            At the Chrome's console :



                                                                                                             1. Select the **Elements** tab
                                                                                                            2. Select the element of your angular's scope. For instance, click on an element <ui-view>, or <div>, or etc.
                                                                                                            3. Type the command **angular.element($0).scope()** with following variable in the angular's scope


                                                                                                            Example



                                                                                                            angular.element($0).scope().a
                                                                                                            angular.element($0).scope().b


                                                                                                            Chrome's console
                                                                                                            enter image description here






                                                                                                            share|improve this answer



























                                                                                                              0












                                                                                                              0








                                                                                                              0







                                                                                                              At the Chrome's console :



                                                                                                               1. Select the **Elements** tab
                                                                                                              2. Select the element of your angular's scope. For instance, click on an element <ui-view>, or <div>, or etc.
                                                                                                              3. Type the command **angular.element($0).scope()** with following variable in the angular's scope


                                                                                                              Example



                                                                                                              angular.element($0).scope().a
                                                                                                              angular.element($0).scope().b


                                                                                                              Chrome's console
                                                                                                              enter image description here






                                                                                                              share|improve this answer















                                                                                                              At the Chrome's console :



                                                                                                               1. Select the **Elements** tab
                                                                                                              2. Select the element of your angular's scope. For instance, click on an element <ui-view>, or <div>, or etc.
                                                                                                              3. Type the command **angular.element($0).scope()** with following variable in the angular's scope


                                                                                                              Example



                                                                                                              angular.element($0).scope().a
                                                                                                              angular.element($0).scope().b


                                                                                                              Chrome's console
                                                                                                              enter image description here







                                                                                                              share|improve this answer














                                                                                                              share|improve this answer



                                                                                                              share|improve this answer








                                                                                                              edited Jun 21 '18 at 15:57

























                                                                                                              answered Jun 21 '18 at 15:26









                                                                                                              Khachornchit SongsaenKhachornchit Songsaen

                                                                                                              862710




                                                                                                              862710





















                                                                                                                  0














                                                                                                                  For only debugging purposes I put this to the start of the controller.



                                                                                                                   window.scope = $scope;

                                                                                                                  $scope.today = new Date();


                                                                                                                  And this is how I use it.



                                                                                                                  enter image description here



                                                                                                                  then delete it when I am done debugging.






                                                                                                                  share|improve this answer



























                                                                                                                    0














                                                                                                                    For only debugging purposes I put this to the start of the controller.



                                                                                                                     window.scope = $scope;

                                                                                                                    $scope.today = new Date();


                                                                                                                    And this is how I use it.



                                                                                                                    enter image description here



                                                                                                                    then delete it when I am done debugging.






                                                                                                                    share|improve this answer

























                                                                                                                      0












                                                                                                                      0








                                                                                                                      0







                                                                                                                      For only debugging purposes I put this to the start of the controller.



                                                                                                                       window.scope = $scope;

                                                                                                                      $scope.today = new Date();


                                                                                                                      And this is how I use it.



                                                                                                                      enter image description here



                                                                                                                      then delete it when I am done debugging.






                                                                                                                      share|improve this answer













                                                                                                                      For only debugging purposes I put this to the start of the controller.



                                                                                                                       window.scope = $scope;

                                                                                                                      $scope.today = new Date();


                                                                                                                      And this is how I use it.



                                                                                                                      enter image description here



                                                                                                                      then delete it when I am done debugging.







                                                                                                                      share|improve this answer












                                                                                                                      share|improve this answer



                                                                                                                      share|improve this answer










                                                                                                                      answered Mar 8 at 17:05









                                                                                                                      mcvkrmcvkr

                                                                                                                      77721430




                                                                                                                      77721430





















                                                                                                                          -5














                                                                                                                          Just define a JavaScript variable outside the scope and assign it to your scope in your controller:



                                                                                                                          var myScope;
                                                                                                                          ...
                                                                                                                          app.controller('myController', function ($scope,log) {
                                                                                                                          myScope = $scope;
                                                                                                                          ...


                                                                                                                          That's it! It should work in all browsers (tested at least in Chrome and Mozilla).



                                                                                                                          It is working, and I'm using this method.






                                                                                                                          share|improve this answer




















                                                                                                                          • 2





                                                                                                                            Using global variables is a bad practice, but I guess this is okay in most cases. It's only for debugging after all; But still you have to be careful not to use the same variable name twice.

                                                                                                                            – Pedro Affonso
                                                                                                                            Aug 29 '15 at 12:53






                                                                                                                          • 2





                                                                                                                            It's a bad idea because it requires you to modify the source code. This is annoying even if it's your own code, and impossible if it's something running on another server. Even if you can modify the code, you then have to remember to undo it. So while it may work, it is not the best practice.

                                                                                                                            – Jim Davis
                                                                                                                            Oct 6 '15 at 16:49






                                                                                                                          • 1





                                                                                                                            @JimDavis In general I agree, but there are cases when doing this is useful: By temporarily modifying the sources you can let the code do the things you'd have to do manually again and again. So when the problem feels tricky and the debugging is gonna take long, I modify the code. Undoing the changes is trivial with the right tool (git).

                                                                                                                            – maaartinus
                                                                                                                            Sep 8 '16 at 1:11















                                                                                                                          -5














                                                                                                                          Just define a JavaScript variable outside the scope and assign it to your scope in your controller:



                                                                                                                          var myScope;
                                                                                                                          ...
                                                                                                                          app.controller('myController', function ($scope,log) {
                                                                                                                          myScope = $scope;
                                                                                                                          ...


                                                                                                                          That's it! It should work in all browsers (tested at least in Chrome and Mozilla).



                                                                                                                          It is working, and I'm using this method.






                                                                                                                          share|improve this answer




















                                                                                                                          • 2





                                                                                                                            Using global variables is a bad practice, but I guess this is okay in most cases. It's only for debugging after all; But still you have to be careful not to use the same variable name twice.

                                                                                                                            – Pedro Affonso
                                                                                                                            Aug 29 '15 at 12:53






                                                                                                                          • 2





                                                                                                                            It's a bad idea because it requires you to modify the source code. This is annoying even if it's your own code, and impossible if it's something running on another server. Even if you can modify the code, you then have to remember to undo it. So while it may work, it is not the best practice.

                                                                                                                            – Jim Davis
                                                                                                                            Oct 6 '15 at 16:49






                                                                                                                          • 1





                                                                                                                            @JimDavis In general I agree, but there are cases when doing this is useful: By temporarily modifying the sources you can let the code do the things you'd have to do manually again and again. So when the problem feels tricky and the debugging is gonna take long, I modify the code. Undoing the changes is trivial with the right tool (git).

                                                                                                                            – maaartinus
                                                                                                                            Sep 8 '16 at 1:11













                                                                                                                          -5












                                                                                                                          -5








                                                                                                                          -5







                                                                                                                          Just define a JavaScript variable outside the scope and assign it to your scope in your controller:



                                                                                                                          var myScope;
                                                                                                                          ...
                                                                                                                          app.controller('myController', function ($scope,log) {
                                                                                                                          myScope = $scope;
                                                                                                                          ...


                                                                                                                          That's it! It should work in all browsers (tested at least in Chrome and Mozilla).



                                                                                                                          It is working, and I'm using this method.






                                                                                                                          share|improve this answer















                                                                                                                          Just define a JavaScript variable outside the scope and assign it to your scope in your controller:



                                                                                                                          var myScope;
                                                                                                                          ...
                                                                                                                          app.controller('myController', function ($scope,log) {
                                                                                                                          myScope = $scope;
                                                                                                                          ...


                                                                                                                          That's it! It should work in all browsers (tested at least in Chrome and Mozilla).



                                                                                                                          It is working, and I'm using this method.







                                                                                                                          share|improve this answer














                                                                                                                          share|improve this answer



                                                                                                                          share|improve this answer








                                                                                                                          edited Mar 9 at 11:22

























                                                                                                                          answered Jun 17 '15 at 8:52









                                                                                                                          AsqanAsqan

                                                                                                                          2,06363871




                                                                                                                          2,06363871







                                                                                                                          • 2





                                                                                                                            Using global variables is a bad practice, but I guess this is okay in most cases. It's only for debugging after all; But still you have to be careful not to use the same variable name twice.

                                                                                                                            – Pedro Affonso
                                                                                                                            Aug 29 '15 at 12:53






                                                                                                                          • 2





                                                                                                                            It's a bad idea because it requires you to modify the source code. This is annoying even if it's your own code, and impossible if it's something running on another server. Even if you can modify the code, you then have to remember to undo it. So while it may work, it is not the best practice.

                                                                                                                            – Jim Davis
                                                                                                                            Oct 6 '15 at 16:49






                                                                                                                          • 1





                                                                                                                            @JimDavis In general I agree, but there are cases when doing this is useful: By temporarily modifying the sources you can let the code do the things you'd have to do manually again and again. So when the problem feels tricky and the debugging is gonna take long, I modify the code. Undoing the changes is trivial with the right tool (git).

                                                                                                                            – maaartinus
                                                                                                                            Sep 8 '16 at 1:11












                                                                                                                          • 2





                                                                                                                            Using global variables is a bad practice, but I guess this is okay in most cases. It's only for debugging after all; But still you have to be careful not to use the same variable name twice.

                                                                                                                            – Pedro Affonso
                                                                                                                            Aug 29 '15 at 12:53






                                                                                                                          • 2





                                                                                                                            It's a bad idea because it requires you to modify the source code. This is annoying even if it's your own code, and impossible if it's something running on another server. Even if you can modify the code, you then have to remember to undo it. So while it may work, it is not the best practice.

                                                                                                                            – Jim Davis
                                                                                                                            Oct 6 '15 at 16:49






                                                                                                                          • 1





                                                                                                                            @JimDavis In general I agree, but there are cases when doing this is useful: By temporarily modifying the sources you can let the code do the things you'd have to do manually again and again. So when the problem feels tricky and the debugging is gonna take long, I modify the code. Undoing the changes is trivial with the right tool (git).

                                                                                                                            – maaartinus
                                                                                                                            Sep 8 '16 at 1:11







                                                                                                                          2




                                                                                                                          2





                                                                                                                          Using global variables is a bad practice, but I guess this is okay in most cases. It's only for debugging after all; But still you have to be careful not to use the same variable name twice.

                                                                                                                          – Pedro Affonso
                                                                                                                          Aug 29 '15 at 12:53





                                                                                                                          Using global variables is a bad practice, but I guess this is okay in most cases. It's only for debugging after all; But still you have to be careful not to use the same variable name twice.

                                                                                                                          – Pedro Affonso
                                                                                                                          Aug 29 '15 at 12:53




                                                                                                                          2




                                                                                                                          2





                                                                                                                          It's a bad idea because it requires you to modify the source code. This is annoying even if it's your own code, and impossible if it's something running on another server. Even if you can modify the code, you then have to remember to undo it. So while it may work, it is not the best practice.

                                                                                                                          – Jim Davis
                                                                                                                          Oct 6 '15 at 16:49





                                                                                                                          It's a bad idea because it requires you to modify the source code. This is annoying even if it's your own code, and impossible if it's something running on another server. Even if you can modify the code, you then have to remember to undo it. So while it may work, it is not the best practice.

                                                                                                                          – Jim Davis
                                                                                                                          Oct 6 '15 at 16:49




                                                                                                                          1




                                                                                                                          1





                                                                                                                          @JimDavis In general I agree, but there are cases when doing this is useful: By temporarily modifying the sources you can let the code do the things you'd have to do manually again and again. So when the problem feels tricky and the debugging is gonna take long, I modify the code. Undoing the changes is trivial with the right tool (git).

                                                                                                                          – maaartinus
                                                                                                                          Sep 8 '16 at 1:11





                                                                                                                          @JimDavis In general I agree, but there are cases when doing this is useful: By temporarily modifying the sources you can let the code do the things you'd have to do manually again and again. So when the problem feels tricky and the debugging is gonna take long, I modify the code. Undoing the changes is trivial with the right tool (git).

                                                                                                                          – maaartinus
                                                                                                                          Sep 8 '16 at 1:11





                                                                                                                          protected by Pankaj Parkar Nov 11 '15 at 19:10



                                                                                                                          Thank you for your interest in this question.
                                                                                                                          Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).



                                                                                                                          Would you like to answer one of these unanswered questions instead?



                                                                                                                          Popular posts from this blog

                                                                                                                          1928 у кіно

                                                                                                                          Захаров Федір Захарович

                                                                                                                          Ель Греко