Angular ng-filter

In this example below you will see how to do a Angular ng-filter with some HTML / CSS and Javascript

An example of Angular JS ng-filter directive

This awesome code was written by achautard, you can see more from this user in the personal repository.
You can find the original code on
Copyright achautard ©


  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>Angular ng-filter</title>
  <link rel='stylesheet prefetch' href=''>

      <link rel="stylesheet" href="css/style.css">



  <html ng-app="app">
  <div ng-controller="personController">
      <input type="text" ng-model="myFilter" placeholder="Type your filter here"/>
        <li ng-repeat="person in persons | orderBy: '+lastName' | filter: myFilter  ">
          {{ getFullName(person) }}
  <script src=''></script>
<script src=''></script>


    <script  src="js/index.js"></script>



/*Downloaded from */
div {
  width: 100%;
  font-size: 40px;
  padding: 20px;

/*Downloaded from */
angular.module("app", []).controller("personController", 
  $scope.persons = [
    { "firstName": "Bradley", "lastName": "Farmer" },
    { "firstName": "Cathryn", "lastName": "Maldonado"},
    { "firstName": "John","lastName": "Cooper" },
    { "firstName": "Reid", "lastName": "Campos" },
    { "firstName": "Iva", "lastName": "Briggs" },
    { "firstName": "Vera", "lastName": "Byers" }
  $scope.getFullName = function(person) {
    return person.firstName + " " + person.lastName;