How to search items from different views in Angular.js

Question

In my home:

.state('home',{
        url: '',
        views: {
           '': {
            templateUrl: 'views/main.html',
            controller:'MainCtrl'
           }
    ...

I loop through some books and also have a simple search field to filter the items:

<input type="text" ng-model="search">
<article class="items" ng-repeat="book in allBooks  | filter: search" >

This works, but I would like to add the input filed inside a sidebar, and have that sidebar in a seperate view - so that I would not have to duplicate it in every view. So in my index.html I have the following code

 <div ng-include ng-controller="MainCtrl" src="'views/sidebar.html'" class="sidebar"></div>
 <div class="container" ui-view></div>

Assuming that this is a good practice, is there a way to add the search input field inside the sidebar, and still have it effect the loop in the home state?

Thanks

Answer 1

You can make the home state a nested view of the sidebar. The ng-model that your filter is bound to in the sidebar view will then be available to the home state. The home state will delegate to the above sidebar scope when it doesn't find a search property on its own scope.

Here's my quick and dirty example: http://plnkr.co/gmUaDLSfJxOL42EPZ9ak