JSFiddle - React, Tailwind, and code Playground

by Shamal Perera

HTML

<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>

JavaScript

angular.module('myApp', []);
angular.module('myApp').factory('searchService', function searchService(){
    var search = "";
    return {
    	search : search
    };
});

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;
});