JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.1/css/foundation.min.css">
<body ng-app="myApp" ng-controller="myTest">
<input ng-model="search" type="text" placeholder='filter here...' />
<ul>
<li ng-repeat="book in books | orderBy:'author' | filter:search">
<p>{{book.title}} / {{book.author}}</p>
</li>
</ul>
</body>
JavaScript
var app = angular.module('myApp', []);
app.controller('myTest', function($scope) {
$scope.books =
[
{
title: 'Testing Processes',
author: 'Maxim'
},
{
title: 'Fart Headed Man',
author: 'Jack Williams'
},
{
title: 'My life',
author: 'Jeorgie MC'
}
];
});