Updating the data in the angularjs service and controllers

Question

I have a angular service called 'NoteBooksService':

app.factory('NoteBooksService', function() {

    var permanentStorage = window.localStorage;
    // Initializing the local storage if no data exists in the local storage.
    if (permanentStorage.getItem("noteBooks") === null) {
        permanentStorage["noteBooks"] = JSON.stringify([
            {
                name:"Your first notebook", //the defualt title of the notebook
                icon:0, // the defualt icon of the nptebook
                color:"Blue", // the default color of the notebook.
                pages:[ // adding one test page to the notebook.
                    {
                        name:"Your first page",
                        content:"The content of your first page ..."
                    }
                ]
            }
        ]);
    }

    var noteBooks = JSON.parse(permanentStorage["noteBooks"]); // loading the notebooks from local storage.
    return { // providing access to this service
        noteBooks: noteBooks, // used to get all the notebooks
        getNoteBook : function(index) { // returns one particular notebook by index.
            return noteBooks[index]
        }
    }
});

It checks to see if the local storage contains a key, if not it adds the key to the local storage. If the local storage has the key, it loads the data from local storage.

I want to update the service when the data in the local storage changes and I also want to update the variables in my controller that were initialized by this service.

Until now I used $window.location.reload(); after each alteration to the local storage re-render the whole page but now I need to do two things.

1. Re-render the whole page
2. Navigate to another state.

I tried the code below but it didn't work as I have expected:

$state.go('NoteBook');
$window.location.reload();

Is there any better way to do this?

Answer 1

Ok, I just needed to do this:

$rootScope.$apply();