angularjs architecture - sharing data between controllers

I am looking for community advice on how to setup my first angular application.

I have multiple pages with shared functionality: - many filters are shared (location, status, etc) - each page has a grid with some overlap of columns, some specific to each page - each page has the data filtered differently

I created a service that manages the grid portion on each page so that's working great. Where I am struggling is how to bind the filters to the grid. I want to have faceted navigation and when a user clicks on a location I want to update the grid.

I have the following services:

• CustomerModuleService (handles the grid functionality for all pages)
• CustomerService (fetches customers via http)

I have the following controllers and their dependencies:

- CustomerFilterCtrl ['$scope', 'customerModuleService']
- PageOneCtrl        ['$scope', 'customerModuleService', 'customerService']
- PageTwoCtrl        ['$scope', 'customerModuleService', 'customerService']

An example of PageOne/PageTwo view is like this:

<div ng-controller="CustomerFilterCtrl">
    <location-filter></location-filter>

    <input type="text" ng-model="test"></input>
</div>

<input type="text" ng-model="test"></input>


<div id="grid1" ui-grid="gridOptions" ui-grid-paging ui-grid-resize-columns external-scopes="gridScope" class="grid" style="height: 700px;">
</div>

I am trying to find ng-model="test" between the two controllers as a proof of concept.

Could someone help me understand how to glue this type of behavior together in angular or possibly give suggests how to do it.