I'm currently developing an application that requires the ability to detect when a user loses internet connection or is unable to reach the server. Various controllers and services should be able to check and update this status easily. I have successfully implemented this functionality using an angular service along with:
window.addEventListener('offline', function() {OfflineService.checkIfOnline});
where the service handles the logic like:
window.navigator.onLine ? online = true : online = false
The challenge arises when I need to reflect this change in the view once the offline event is triggered. I've been struggling to find a way to dynamically update the scope property or controller property whenever the service property is updated by the event.
Upon using $scope.$watch, the designated function seems to execute 10 times initially (as logged in the console) but does not trigger again thereafter.
I attempted to recreate the issue in a jsfiddle, although it's my first time working with this tool and I am unsure if it was done correctly:
https://jsfiddle.net/m3nx5yLm/1/
Any guidance you could provide would be greatly appreciated!