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.details.name}} ({{p.details.age}})</h4>
</li>
</ul>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3>Filtered by <small><code>{name:'Jo'}</code></small></h3>
</div>
<div class="panel-body">
<ul class="list-unstyled">
<li ng-repeat="p in filteredPeople">
<h4>{{p.details.name}} ({{p.details.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 = [{date:new Date(), details:{
name: 'Josh',
age: 32
}}, {date:new Date(), details:{
name: 'Jonny',
age: 34
}}, {date:new Date(), details:{
name: 'Blake',
age: 28
}}, {date:new Date(), details:{
name: 'David',
age: 35
}}];
var age = 34;
$scope.filteredPeople = $filter('filter')(people, function(person){
return age.test(person.details.age);
});
$scope.people = people.slice(0);
});
angular.bootstrap(document, ['myApp']);
});
}());