Document processing. visibility in AngularJS

I would like to execute a utility function when the window.document.visibilitychange happens. This event sets document.hidden and document.visibilityState.

I currently have the following working code:

app.factory("viewService", function($rootScope,$document) {

    var service = {

        isVisible: false,

        init: function(){

            $document[0].addEventListener("visibilitychange", service.visibilityChanged, false);

            service.visibilityChanged();
        },

        visibilityChanged: function(){

            service.isVisible = ! $document[0].hidden;
            $rootScope.$apply();
        }
    }

    return service;

});

      

        
        
        
      

    

I (currently for testing purposes) show the viewService.isVisible value in the view by binding to it.

This works correctly, however it looks pretty messy and I'm sure there is a more elegant implementation.

I'm new to AngularJS and I assumed I could just do:

    app.factory("viewService", function(accountService, eventService, $rootScope, focus, blur, $document) {

        var service = {

            isVisible: !$document[0].hidden,

       ...

      

        
        
        
      

    

And isVisible will update as I am using $ document instead of document, so the property change will be detected and applied automatically.

Where am I going wrong? What is a cleaner approach to this issue?