JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<div ng-App="stack">
    <input type="search" class="form-control" ng-model="search" placeholder="Search for fruits!" />
    <table class="table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>City</th>
                <th>Code</th>
            </tr>
        </thead>
        <tbody filter-list="search">
            <tr>
                <td>1</td>
                <td>James</td>
                <td>London</td>
                <td>d4azA</td>
            </tr>
            <tr>
                <td>2</td>
                <td>John</td>
                <td>New York</td>
                <td>Cx34R</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Travis</td>
                <td>Roma</td>
                <td>eza3R</td>
            </tr>
        </tbody>
    </table>
</div>

JavaScript

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

app.directive('filterList', function ($timeout) {
    return {
        link: function (scope, element, attrs) {

            var td = Array.prototype.slice.call(element[0].children);

            function filterBy(value) {
                td.forEach(function (el) {
                    el.className = el.textContent.toLowerCase().indexOf(value.toLowerCase()) !== -1 ? '' : 'ng-hide';
                });
            }

            scope.$watch(attrs.filterList, function (newVal, oldVal) {
                if (newVal !== oldVal) {
                    filterBy(newVal);
                }
            });
        }
    };
});