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?
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$digestmethod and all the bindings will update on HTML.