I have one search page where user enters search criteria and search results will be displayed and when the user navigates to another page and comes back to this page the results should be persist.
Each submodule has it's own app.js and controller and how to persist data across pages. I am not pretty sure how to go with $localStorage
As comments have said, services and factories are both capable of this. I generally handle this using localStorageService like you have suggested. First, load the local storage module in your index.html AFTER angularJS, but BEFORE your app.js.
Next, include LocalStorageModule as a dependency in your main module's declaration.
Now, configure locaStorageService in the relevant module's declaration file using:
All together, your app.js file should resemble this:
I minify my scripts before they go into production, so I use dependency injection, specifically with the $inject syntax.
An example controller that loads your query from a cookie on page load, and saves your query to a cookie when you execute a search ($scope.doSearch):
As long as your root URL does not change, you can access this cookie with either your query or your results on any page through localStorageService. If you need more details on anything just let me know.
Note if you want to do this automatically on page load, you need to wrap your controller in an Immediately Invoked Function Expression. Good luck! AngularJS has a fairly high learning curve, but is one of the most powerful front end software suites available.