javascript - AngularJs: Searching with ng-repeat with two different controllers -

i have angular app using 2 tables. top table supposed search data both tables, however, using 2 different controllers. how can top table using simple service or factory?

div ng-controller="topctrl">      <tr ng-repeat="data in mydata | filter:search">           <td><input type="checkbox"/></td>           <td>{{ data.number }}</td>           <td>{{ data.street }}</td>       </tr>  </div>   div ng-controller="botctrl">      <tr ng-repeat="data in mydata2 | filter:search2">           <td><input type="checkbox"/></td>           <td>{{ data.number }}</td>           <td>{{ data.street }}</td>       </tr>  </div> 

you can include service directly searchquery

demo

angular.module('myapp').controller('topctrl', function topctrl($scope, searchservice) {     $scope.mydata = ["a", "b"];     $scope.searchservice = searchservice; });  angular.module('myapp').controller('botctrl', function botctrl($scope, searchservice) {     $scope.mydata2 = ["a", "b"];     $scope.searchservice = searchservice; }); 

---

<div ng-app="myapp">     <div ng-controller="topctrl">         <input type="text" ng-model="searchservice.search"/>         <table>             <tr ng-repeat="data in mydata | filter:searchservice.search">                 <td>{{ data }}</td>             </tr>         </table>     </div>     <hr/>     <div ng-controller="botctrl">         <table>             <tr ng-repeat="data in mydata2 | filter:searchservice.search">                 <td>{{ data }}</td>             </tr>         </table>     </div> </div>