Simple Find-As-You-Type Search With Ranking

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

app.controller('MainCtrl', function($scope) {
  $scope.inputText = '';
  $scope.pets = [
      {name: 'rufus', type: 'dog', color: 'brown'},
      {name: 'fiddo', type: 'dog', color: 'white'},
      {name: 'diamond', type: 'cat', color: 'black'},
      {name: 'jazz', type: 'lizard', color: 'green'},
      {name: 'blackie', type: 'cat', color: 'black'},
      {name: 'tom', type: 'cat', color: 'orange'},
      {name: 'gandalf', type: 'lizard', color: 'gray'},
      {name: 'pickle', type: 'hamster', color: 'brown'},
  ];
});

app.filter('rankSearch', function() {
   return function(array, searchKey, props){
      if (!array || !searchKey || !props) return array;

      for(var i =0; i<array.length; i++){
          var obj = array[i];
          obj.rankSearch = 0;
          for(var j=0; j<props.length; j++){
              var index = obj[props[j]].indexOf(searchKey);
              obj.rankSearch += (index === -1 ? 15 : index) * ((j+1)*8);
          }
      }

      return array;
   }
});

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

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js" data-semver="1.2.16"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <h1>Pets</h1>
  <input type="text" ng-model="inputText" placeholder="Search">
  
  <pre ng-repeat="pet in pets | rankSearch:inputText:['name','type','color'] | orderBy:'rankSearch'">{{pet | json}}</pre>
  
</body>

</html>

/* Put your css in here */

pre{
  background-color: #eee;
  padding: 10px;
}

input{
  padding: 10px 15px;
  border-radius: 5px;
  width: 200px;
  font-size: 16px;
  border: 2px solid #bbb;
}