AngularJS - show/hide elements from rootscope

Question

I am listening for an application losing network connectivity by adding an event listener.

When the app goes offline i need to show a message.

The following code does not seem to work for me.

I add the event listener in the application run method so that it is globally available:

document.addEventListener("offline", function() {
    $rootScope.offline = true;
}, false);

Then in my index.html I show hide a message based on that $rootScope variable:

<div id="network-msg" ng-show="$root.offline">
    <div class="full-overlay" ng-show="$root.offline">
        <p class="txt-center">No internet connection</p>
        <p class="txt-center">Trying to re-connect</p>
    </div>
</div>

When i go offline i can see that the varibale is being updated but the message does not show. So if i output:

{{$root.offline}}

on page i can see it switch from false to true correctly but still message is not shown.

Answer 1

Since the value is updated in a dom event handler, the changes have to be done within a $apply callback

document.addEventListener("offline", function() {
    $rootScope.$apply(function(){
        $rootScope.offline = true;
    })
}, false);