AngularJS - Binding same scope to multiple copies of a form using ng-include

Question

I have a simple search form which I have it included in two different pages using ng-include directive. I would like to bind them both to the same scope in such a way that when the user navigates between the pages, they'll keep seeing the same search data they've entered in either of the copies.

I have managed to implement an untidy solution using rootScope, but would like to know if this can be implemented in a proper, cleaner way?

Answer 1

I also used root scope slove it, my layout below:

<div id="page-header" ng-include="'views/layouts/header.html'"></div>
<div id="content">
    <div ui-view="content" ng-cloak></div>
</div>
<div id="page-footer" ng-include="'views/layouts/footer.html'"></div>
<div id="toastElement">
    <ul id="toastBox"></ul>
</div>

header.html bound HeaderController, the functions in HeaderController include search, login, logout, register and both working on $rootScope. Is it helpful?