AngularJS : How to edit $scope from the console?

Question

I am able to access the $scope variable per the accepted answer here. However, I am not able to edit it from the console, i.e. change properties, call functions etc. Is this even possible?

Here is a test code I've been experimenting with:

<!doctype html>
<html data-ng-app="Foo">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script type="text/javascript">
      var app = angular.module("Foo", []);
      app.controller("One", ["$scope", function($scope) {
        $scope.text = "hello";
      }]);
    </script>
  </head>
  <body>
    <div id="container" ng-controller="One">
      {{ text }}
    </div><!-- #container -->
  </body>
</html>

If I edit the text property using the console, it changes, but the view does not change:

> angular.element($("#container")).scope().text
< "hello"
> angular.element($("#container")).scope().text = 'bye'
< "bye"

How do I change the $scope values and properties from the console, so that the view and all dependencies also get updates?

http://stackoverflow.com/questions/15663412/how-to-access-scope-variable-in-angular-from-chrome-console — PSL, Jun 09 '15 at 15:43
@DavidGrinberg Linked question answers what OP is asking for. Actually i found more of them too. — PSL, Jun 09 '15 at 15:44
@PSL That is not the question you claim it is a duplicate of, and even this other question you linked doesn't really answer this well. The core question here is how to 'apply' the change. — David says Reinstate Monica, Jun 09 '15 at 15:46
@DavidGrinberg Read down the answer . http://stackoverflow.com/questions/13743058/how-to-access-the-angular-scope-variable-in-browsers-console#answer-15756337 — PSL, Jun 09 '15 at 15:46
@PSL Yes, the lowest ranking, not-accepted answer. As I said, doesn't really answer this question well. — David says Reinstate Monica, Jun 09 '15 at 15:47
@DavidGrinberg i dont think 83 votes is lowest ranking.. :/ and it clearly distinguish when using vanilla and when using jquery. — PSL, Jun 09 '15 at 15:51
@DavidGrinberg Also one more thing, had the question been `how to 'apply' the change` then there will be lot more duplicates because those kinds of question popsup every day. Also it does not mean you should just read the accepted answer other answers (and of course the voting systems) is there for a purpose, otherwise why would have multiple answers on the same question, might as well delete other answers once OP accepts one? Or i completely misunderstand the purpose of marking Duplicate Question. — PSL, Jun 09 '15 at 16:11

Pankaj Parkar · Accepted Answer · 2015-06-09T17:29:16.447

16

Any scope variable updated from outside angular context will won't update it binding, You need to run digest cycle after updating values of scope using scope.$apply() that will call $digest method and all the bindings will update on HTML.

 angular.element($("#container")).scope().text
 angular.element($("#container")).scope().$apply()

Note:- You should add jQuery file in order to make it working.

edited Jun 09 '15 at 17:29

answered Jun 09 '15 at 15:41

Pankaj Parkar

134,766
23
234
299

1

This is wrong actually. OP is not even using jquery (based on the displayed code) – PSL Jun 09 '15 at 15:46
@downvoter please leave comment..what is wrong with mine answer? – Pankaj Parkar Jun 09 '15 at 15:51
1

.$apply will work but i dont know how the snippet will run if there is no jquery loaded. But weird enough OP probably is not showing full code and seems like op himself is doing it.. So i think i can give benefit of the doubt!! Mine removed... – PSL Jun 09 '15 at 15:52
1

thanks @PSL i added the same thing as note. – Pankaj Parkar Jun 09 '15 at 16:01

AngularJS : How to edit $scope from the console?

1 Answers1