CustomFilter http://stackoverflow.com/questions/32076602/how-to-search-on-the-displayed-data-and-not-the-backing-data-using-angular

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-app="productApp" ng-controller="productController">
    <input ng-model="query" ng-trim="true">
    <span>Finding: </span><span>{{ query }}</span>
    <div ng-repeat="product in products | productsFilter: query">
      <strong>{{ $index }}</strong>
      <span>{{ product.name }}</span>
      <span>{{ product.price | currency: '$'}}</span>
    </div>
  </body>

</html>

// Code goes here

angular.module('productApp', [])

.controller('productController', ['$scope', function ($scope) {
  
  $scope.query = '';
  
  $scope.products = [
     {
       name: 'gloves',
       price: 12.4
     },
     {
       name : 'helment',
       price: 27.9
     },
     {
       name: 'shoes',
       price: 399
     }
    ];
}])

.filter('productsFilter', [function () {
  
  // Removes the dollar sign
  var clearQuery = function (dirtyQuery) {
    
    var index = dirtyQuery.indexOf('$');
    
    if (index === -1) 
      return dirtyQuery; 
      
    return dirtyQuery.substr(index+1, dirtyQuery.length-index)
  };
  
  return function (products, query) {
    
    if (query === '') return products;
    
    var newProducts = [];
    
    angular.forEach(products, function (product) {
      
      var cleanQuery = clearQuery(query);
      var strProductPrice = '' + product.price;
      var index = strProductPrice.indexOf(cleanQuery);
      
      if (index !== -1) {
        newProducts.push(product); 
      }
    });
    
    return newProducts;
  };
}]);

/* Styles go here */