angularjs filter example jsfiddle or Plunker

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <meta charset="utf-8" />
  <title>angularjs filter example Plunker</title>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
  <script>
    angular.element(document).ready(function() {
      var app = angular.module('myApp', []);

      app.controller('myCtrl', ['$scope', 'store', function($scope, store) {
        $scope.search = '';
        $scope.products = [];
        $scope.products = store.getProducts();
        $scope.filterProductsByCategory = function(category) {
          $scope.search = category;
        };
      }]);

      // fake service, substitute with your server call ($http)
      app.factory('store', function() {
        var products = [{
          name: 'Apples',
          category: 'Fruit',
          AddedBy: 'Anil Singh'
        }, {
          name: 'Pears',
          category: 'Fruit',
          AddedBy: 'Anil Singh'
        }, {
          name: 'Grapes',
          category: 'Fruit',
          AddedBy: 'Anil Singh'
        }, {
          name: 'Potato',
          category: 'Vegetables',
          AddedBy: 'Anil Singh'
        }, {
          name: 'Green Beans',
          category: 'Vegetables',
          AddedBy: 'Anil Singh'
        }, {
          name: 'Broccoli',
          category: 'Vegetables',
          AddedBy: 'Anil Singh'
        }, {
          name: 'Milk',
          category: 'Dairy',
          AddedBy: 'Anil Singh'
        }, {
          name: 'Yogurt',
          category: 'Dairy',
          AddedBy: 'Anil Singh'
        }, {
          name: 'Cheese',
          category: 'Dairy',
          AddedBy: 'Anil Singh'
        }];

        return {
          getProducts: function() {
            return products;
          }
        };

      });

      angular.bootstrap(document, ['myApp']);
    });
  </script>
</head>

<body>
  <div ng-controller="myCtrl">
    <h2>Search Product: </h2>
    <input type="text" ng-model="search" placeholder="Search..." />
    <table cellpadding="5" cellspacing="1" border="1" style="width:100%;">
      <tr>
        <th>Product</th>
        <th>Category</th>
        <th>AddedBy</th>
      </tr>
      <tr ng-repeat="product in products | filter:search | orderBy:'name'">
        <td>{{product.name}}</td>
        <td>{{product.category}}</td>
        <td>{{product.AddedBy}}</td>
      </tr>
    </table>
  </div>
  <div>
    <h2>Angularjs filter :  <a href="http://www.code-sample.xyz/2016/11/angularjs-tutorials-with-examples-for.html" target="_blank">more...</a></h2>
  </div>
</body>

</html>

/* Put your css in here */
   input[type=text] {
      width: 100%;
      padding: 12px 20px;
      margin: 8px 0;
      box-sizing: border-box;
    }