<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp" ng-controller="myController">
   <div><h2>Filters:</h2>
    Name: <input type="text" ng-model="filters.name"/> <br>
    Last Name: <input type="text" ng-model="filters.lastName"/>
   </div>
   <div >
     <h2>List of results:</h2>
     <div ng-repeat="person in results | filter:filters ">
       {{person.name}} {{person.lastName}}
     </div>
   </div>
   
   <!-- <h3>Debugging...</h3>
   <div>
     Results: <pre>{{results | json}}</pre>
     Filters: <pre>{{filters | json}}</pre>
   </div> -->
  </body>

</html>
var app = angular.module('myApp', []);
app.controller('myController', function($scope){
  $scope.results = [
    {
      "name": "Santiago",
      "lastName": "Doe"
    },
    {
      "name": "Pablo",
      "lastName": "Doe"
    },
    {
      "name": "Veronica",
      "lastName": "Doesel"
    },
    {
      "name": "Pablo",
      "lastName": "Doe"
    },
    {
      "name": "Veronica",
      "lastName": "Doesel"
    }
    ]
})
/* Styles go here */