Фильтр между двумя компонентами AngularJS

var app = angular.module('app', []);

app.controller('appController', function() {
	this.search = "";
});

app.component('searchComponent', {
	template: `
  	<h4>{{ $ctrl.title }}</h4>
    <label>Search table</label>
    <input type = "search" ng-model = "$ctrl.search">
  `,
  controller: function() {
  	this.title = 'Search Component';
  },
  bindings: {
  	search: " = "
  }
});

app.component('tableComponent', {
	template: `
  	<h4>{{ $ctrl.title }}</h4>
    <!-- <p>This works</p> 
    <label>Search table</label>
    <input type = "search" ng-model = "searchTable"> -->
    <table>
    	<thead>
      	<tr>
        	<th>First Name</th>
          <th>Last Name</th>
        </tr>
      </thead>
    	<tbody>
      	<tr ng-repeat = "row in $ctrl.rows | filter: $ctrl.search">
        	<td>{{ row.firstName }}</td>
          <td>{{ row.lastName }}</td>
        </tr>
      </tbody>
    </table>
  `,
  controller: function() {
 		this.title = 'Table Component';
    
    this.rows = [
    	{firstName: 'Zulu', lastName: 'Apple'},
      {firstName: 'Alice', lastName: 'xRay'},
      {firstName: 'Fred', lastName: 'Rogers'}
    ];
  },
  bindings: {
  	search: "<"
  }
});

body {
  font-family: 'Arial', sans-serif;
}
table {
  border-collapse: collapse;
}
td, th {
  border: 1px solid grey;
  padding: 5px;
}
label {
  display: block;
}
input {
  margin-bottom: 10px;
}

<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.min.js"></script>
<div ng-app = "app">
  <div ng-controller = "appController">
    <h3>Filter Between Components</h3>
    <search-component search = "search"></search-component>
    <table-component search = "search"></table-component>
  </div>
</div>