JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="lists">
    <div ng-controller="ProductList as products">
          <form ng-submit="addProduct()">
              <input type="text" placeholder="Enter product" ng-model="productTitle" />
            <button>Add</button>
          </form>
          <ul class="productList">
            <li ng-repeat="product in list track by $index" ng-bind="filteredtitle = (product.title  | custom: searchBox)" ng-show="filteredtitle">
              
            </li>
          </ul>
        <input type="text" placeholder="Search" ng-model="searchBox" />
    </div>
</div>

JavaScript

angular.module('lists', []).controller('ProductList', function($scope) {
    $scope.searchBox="";
    $scope.list = [];
    $scope.addProduct = function() {
        $scope.list.push({title:$scope.productTitle});
        $scope.productTitle = "";
    }
  }).filter('custom', function() {
  return function(input, search) {
    if (!input) return input;
    if (!search) return input;
    var expected = ('' + search).toLowerCase();
    //var result = {};
    //angular.forEach(input, function(value, key) {
     // var actual = ('' + value).toLowerCase();
      //if (actual.indexOf(expected) !== -1) {
       // result[key] = value;
      //}
    //});
      if(input.indexOf(search) > -1) {
        return input;
      } 
      return null;
  }
});