How to change AngularJS data outside the scope?

Question

After hours of frustrating searches I feel I need to submit my question here. I apologize in advance if this question is somehow answered before but none of my searches has helped so far. So here's my question: My JavaScript code is creating an object, which is modified and monitored by AngularJS. On some events (like loading a previous setting of the object), I wish to change the properties of this object from outside the scope. The problem is that the inputs does not change... Here's an example of how I wish to perform these changes: HTML code: ```

``` JavaScript Code: ``` var person = { age: 16 }; // Create module var myApp = angular.module('myApp', []); myApp.factory('Data', function() { return person; }); function FirstCtrl($scope, Data) { $scope.data = Data; } function change() { person.age =…

Accepted Answer

⚠️ Warning: This answer is old, does not reflect best practices, and may not be compatible with newer versions of Angular.

MaxPRafferty's answer is correct - using a function in the scope is often the nicer way to do this - but there is another option. You can use the `angular.element(...).scope()` method to access an Angular scope from unrelated JavaScript. Select the top-level scope for the app by targeting the element that has the `ng-app` attribute specified, with something like in your click handler:

```
function change() {
    var appElement = document.querySelector('[ng-app=myApp]');
    var $scope = angular.element(appElement).scope();
    $scope.$apply(function() {
        $scope.data.age = 20;
    });
}
```

Try it out in this Fiddle.

Shaun just pointed out that Angular will only process any "watches" or "bindings" during a `$digest()` call. If you just modify the properties of the `$scope` directly, the changes may not be reflected immediately and you may gets bugs.

To trigger this you can call `$scope.$apply()` which will check for dirty scopes and update anything bound correctly. Passing a function that does the work inside `$scope.$apply` will allow Angular to catch any exceptions as well. This behaviour is explained in the documentation for Scope.

How to change AngularJS data outside the scope?

Solution

Problem