JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app">
    <div ng-controller="PersonCtrl as person">
    <input type="text" ng-model="text" placeholder="search" />
        <ul>
            <li ng-repeat="friend in person.friends | search:text">
                {{ friend }}
            </li>
        </ul>
    </div>
</div>

CSS

</style>
<script src="//code.angularjs.org/1.3.0-beta.7/angular.js"></script>
<style>

JavaScript

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

app.filter('search', function () {
    return function (items,text,$scope) {
        var filtered = [];
        console.log(text)
        return items.filter(function(item){
        	return item.name.indexOf(text || '') !== -1 || item.info.indexOf(text || '') !== -1
        })
    };
});

app.controller('PersonCtrl', function () {
    this.friends = [{
        name: 'Andrew',
        info: 'male'
    }, {
        name: 'Will',
        info: 'male'
    }, {
        name: 'Mark',
        info: 'male'
    }, {
        name: 'Alice',
        info: 'female'
    }, {
        name: 'Jen',
        info: 'female'
    }];
});