Invoke $scope function from the browser console

There is a times when you need (or you just think you need) to invoke $scope function (inside your controller) directly from the browser JavaScript console.

DIY method:

The following is possibly the simplest case possible.
Let assume we have the following HTML & JS (no routes, no ng-view):

A here is the code to run inside your console.

Invoke $scope function from the browser console

Using Chrome Developer Tools

With Chrome Dev Tools, you just select an element using Chrome Dev Tools element selector (the loop or ctrl+shift+c on Win) and than you can access the element from the console with the $0, so now you can replace the document.querySelector('#someID') with $0 and run the following in the console:

Batarang (AngularJS Chrome Extension) – If you have Batarang installed, then you get special AngularJS tab, switch gives you overview of your $scope.

Global variable

You can also, go old fashion way and expose you $scope via global variable, and invoke directly through it.

Please let me know if you know any other technics.

5 thoughts on “Invoke $scope function from the browser console”

  1. You can add jquery plugin that will return scope:

    $.fn.scope = function() {
    return angular.element(this[0]).scope();
    };

    and you will be able to use:

    $('[ng-controller]:eq(0)').scope().someFunction();

  2. When using Batarang highlight an element in the Element view will allow you to address a $scope variable directly in the console without requiring the angular.element($0).scope() dance.

Leave a Reply

Your email address will not be published.