How to use ng-repeat in one template taking filter query from another one?

Question

I have an angular app, every state consists of two components: navbar and components under the navbar. In the lower one I use ng-repeat to show some items and I need to use filter:

    <div class="col-sm-2 store__item col-centered" ng-repeat="book in vm.books | toArray | orderBy:query" >
     ...
    </div>

However ng-model="query" is in different template, belonging to the navbar component:

<form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search" ng-model="query">
        </div>
</form>

How can I bind them, so that filter would take query from navbar? Thank you

Answer 1

Few suggestions,

1. You can keep the model "query" - in the $rootScope so both of your component can access the same model.
2. Use the angular's event manager, $broadcast/$emit, This is my recommended way, since its follows the decoupled architecture.