Simple Find-As-You-Type Search

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'},
  ];
});

<!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 | filter:inputText | orderBy:'name'">{{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;
}