angular.module('app', [ ]) .controller('main', [ '$scope', '$http', '$interval', function($scope, $http, $interval) { $scope.fruits = [ 'apple', 'pear', 'plum' ]; }]) .filter('titleCase', function() { return function(input) { return (input == undefined || input === null) ? '' : input.replace(/_|-/, ' ').replace(/\w\S*/g, function(text){ return text.charAt(0).toUpperCase() + text.substr(1).toLowerCase(); }); } }) ;
<body ng-app="app"> <div class="container" ng-controller="main"> <div class="row"> <div class="col-md-12"> Here are {{ fruits.length }} fruits: <form class="navbar-form" role="search"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search" ng-model="search" /> <div class="input-group-btn"> <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> </div> </div> </form> <p>I'm searching by "{{ search }}"</p> <ul> <li ng-repeat="fruit in fruits | filter:search"> {{ fruit | titleCase }} fruit </li> </ul> </div> </div> </div> </body>