Javascript AngularJs：使用两个不同的控制器使用ng repeat进行搜索

我有一个使用两张桌子的角度应用程序。顶部的表应该搜索两个表的数据，但是，它们使用两个不同的控制器。我如何通过一个简单的服务或工厂让最上面的表执行此操作

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>

div ng controller=“topCtrl”>
{{data.number}
{{data.street}
div ng controller=“botCtrl”>
{{data.number}
{{data.street}

您可以将该服务直接包含到searchQuery中

---

{{data}}

{{data}}

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>