<html>
<head>
<link data-require="bootstrap-css@3.0.0-rc2" data-semver="3.0.0-rc2" rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap.min.css" />
<script data-require="angular.js@1.3.0" src="https://code.angularjs.org/1.3.0/angular.js" data-semver="1.3.0"></script>
</head>
<body class="container" ng-app="filterApp" ng-controller="MainCtrl">
<h1>Ninjas</h1>
<div class="form-group col-md-2">
<input class="form-control" ng-model="expression" placeholder="filter..." />
</div>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Name</th>
<th>SuperPower</th>
<th>Skills</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="ninja in ninjas | filter:expression">
<td>{{ ninja.name }}</td>
<td>{{ ninja.superpower }}</td>
<td>{{ ninja.skills.join(', ') }}</td>
</tr>
</tbody>
</table>
<script>
angular.module('filterApp', [])
.controller('MainCtrl', function($scope) {
$scope.ninjas = [{
name: 'Agnes',
superpower: 'Java Champion',
skills: ['Java', 'JavaEE', 'BDD']
}, {
name: 'JB',
superpower: 'Stack Overflow Superstar',
skills: ['Java', 'Javascript', 'Gradle']
}, {
name: 'Cyril',
superpower: 'VAT specialist' /*I'm joking buddy*/ ,
skills: ['Java', 'Play!']
}, {
name: 'Cedric',
superpower: 'Hype developper',
skills: ['Java', 'Javascript', 'Git']
}];
});
</script>
</body>
</html>