Calling scope function from outside angular does not trigger watch

Question

Simple example:

  <body ng-app="testApp">
    <form name="myForm" id='CtrlHost' ng-controller="Ctrl">
        <input type="Button" value="Change Inside Angular" ng-click="ChangeIt()" />
        <input type="Button" value="Change Outside Angular" onclick="OutsideAngularChange()" />
      </form>
  </body>

angular.module('testApp', [])
    .controller('Ctrl', function($scope, MyService) {
        var NewPropValue = 1;
        $scope.ChangeIt = function () {
            alert("scope.changeit called");
              NewPropValue++;
              MyService.SetMyProp(NewPropValue);
        };
        $scope.$watch(MyService.GetMyProp, function (newValue) {
            alert("NewValue from Watch = " + newValue);   
        });
    }).service('MyService', function () {
       var myProp;

        this.GetMyProp = function () {
            return MyProp;
        };

        this.SetMyProp = function (newProp) {
            MyProp = newProp;   
        };
    });

function OutsideAngularChange() {
                  alert("OutsideAngularChange called")
    angular.element(document.getElementById('CtrlHost')).scope().ChangeIt();
}

http://jsfiddle.net/jonnyknowsbest/4umxanpu/

Hit the "Change Inside Angular" button and the scope watch is triggered. Hit the "Change Outside Angular" button and the scope watch is NOT triggered.

Both buttons call the same scope method to update a service property.

How come one works and one does not?

Jonathan · Accepted Answer · 2015-03-04 08:28:51Z

1

Try using $scope.$apply() after changing the value.

https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply

answered Mar 4, 2015 at 8:28

Jonathan

3,6543 gold badges23 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Muhammad Umer Over a year ago

is there a way to go the other way trigger external function when scope value changes?

Muhammad Umer Over a year ago

it's $scope.$watch('var', callback)

Joe Enzminger · Accepted Answer · 2015-03-04 08:35:30Z

1

You answered your own question. $watches are only called inside of $digest(). This is the definition of "inside angular". Since your call is made outside of $digest(), or "outside angular", none of the watchers will be evaluated.

You can manually trigger a digest in a number of ways, but

angular.element(document.getElementById('CtrlHost')).scope().ChangeIt();

angular.element(document.getElementById('CtrlHost')).scope().$apply();

is probably the most appropriate here.

answered Mar 4, 2015 at 8:35

Joe Enzminger

11.2k3 gold badges54 silver badges77 bronze badges

Collectives™ on Stack Overflow

Calling scope function from outside angular does not trigger watch

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related