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

  <head>
    <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-controller="DemoCtrl">
      <input class="form-control" type="text" ng-model="q" placeholder="Search by year, make, model" />
      <br/>
      <ul>
        <li ng-repeat="car in cars | filter:filterCars">{{car.year}} {{car.make}} {{car.model}}</li>
      </ul>
    </div>
  </body>

</html>

// Code goes here

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

app.controller('DemoCtrl', [ '$scope', function($scope) {
  $scope.q = '';
  $scope.cars = [
  {
    year: 2006,
    make: 'BMW',
    model: 'M3'
  },
  {
    year: 2006, 
    make: 'BMW',
    model: 'Z4'
  },
  {
    year: 1992, 
    make: 'Mazda',
    model: 'Miata'
  },
  {
    year: 2008, 
    make: 'BMW',
    model: '750'
  }
  ];

  var match = function (item, val) {
    var regex = new RegExp(val, 'i');
    return item.year.toString().search(regex) == 0 ||
           item.make.search(regex) == 0 ||
           item.model.search(regex) == 0;
  };
  
  $scope.filterCars = function(car) {
    // No filter, so return everything
    if (!$scope.q) return true;
    var matched = true;
    
    // Otherwise apply your matching logic
    $scope.q.split(' ').forEach(function(token) {
        matched = matched && match(car, token); 
    });
     
    return matched;
  };
}]);
/* Styles go here */