JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.angularjs.org/1.2.0-rc.3/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://code.angularjs.org/1.2.0-rc.3/angular-route.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<div ng-controller="MyCtrl">
    <div class="panel panel-default">
        <div class="panel-heading">
             <h3>Full List</h3>
        </div>
        <div class="panel-body">
            <ul class="list-unstyled">
                <li ng-repeat="p in people">
                     <h4>{{p.name}} ({{p.age}})</h4>

                </li>
            </ul>
        </div>
    </div>
        <div class="panel panel-default">
        <div class="panel-heading">
             <h3>Filtered by <small><code>{name:'Jos'}</code></small></h3>
        </div>
        <div class="panel-body">
            <ul class="list-unstyled">
        <li ng-repeat="p in filteredPeople">
             <h4>{{p.name}} ({{p.age}})
            </h4>

        </li>
    </ul>
        </div>
    </div>    
</div>

JavaScript

(function () {

    angular.element(document).ready(function () {
        var app = angular.module('myApp', []);

        app.controller("MyCtrl", function ($scope, $filter) {

            var people = [{
                name: 'Josh',
                age: 32
            }, {
                name: 'Jonny',
                age: 34
            }, {
                name: 'Blake',
                age: 28
            }, {
                name: 'David',
                age: 35
            }];

            $scope.filteredPeople = $filter('filter')(people, {
                name: ['Jon','Jos']
            });

            $scope.people = people.slice(0);

        });

        angular.bootstrap(document, ['myApp']);
    });


}());