Service variable not being watched

Question

I have a service as thus

function() {
    this.show = false;

    this.toggle = function() {
        this.show = !this.show;
    }
}

and the menu has an ng-show looking at MenuService.show

this works perfectly, however I am trying make it so that when user clicks within the main page it sets show to false, thus, hiding the menu. I have this code

angular.element(document.getElementById("pages")).bind("click", function() {
    $scope.menuService.show = false;
});

but the ng-show doesnt seem to be taking any notice of show now being false and continues to show. What am I doing wrong?

Answer 1

If you are binding to events (using bind) outside of Angular, then you need to $apply to run an Angular digest and update the scope:

angular.element(document.getElementById("pages")).bind("click", function() {
    $scope.menuService.show = false;
    $scope.$apply();
});