Lijo Lijo - 7 months ago 31
AngularJS Question

Filtering ng-repeat result set is not working

I tried to create a textbox based filtering of a ng-repeat result. Though there is no errors listed, the filtering is not working. What is missing here?

Updated code after making following change:

<tbody ng-repeat="objReview in reviewsList | myCustomFilter:criteria" >

The filter is gettiing called two times for each row. How to make it call only once?


<script src=""></script>
<script src=""></script>
<style type="text/CSS">
{border-collapse: collapse;width: 100%;}
th, td
{text-align: left;padding: 8px;}
{background-color: #f2f2f2;}
{background-color: #4CAF50;color: white;}
<script type="text/javascript">
//defining module
var app = angular.module('myApp', ['ngResource']);

//defining factory
app.factory('reviewsFactory', function ($resource) {
return $resource('',
{ apiKey: 'myKey' }

//defining controller
app.controller('myController', function ($scope, reviewsFactory)

$scope.criteria = "";
$scope.reviewsList = reviewsFactory.query();


app.filter('myCustomFilter', function ()

return function (input, criteria)

var output = [];

if (!criteria || criteria==="")

output = input;
angular.forEach(input, function (item)

//If name starts with the criteria
if ( == 0)
return output;

<body ng-app="myApp">
<div ng-controller="myController">

SEARCH FOR: <input type="text" ng-model="criteria">
<th>Review Date</th>
<tbody ng-repeat="objReview in reviewsList | myCustomFilter:criteria" >

Further Reading

  1. Is this normal for AngularJs filtering

  2. How does data binding work in AngularJS?


As noted in the comments by Lex you just need to get rid of the prefix 'filter', so change

<tbody ng-repeat="objReview in reviewsList | filter:myCustomFilter:criteria" >


<tbody ng-repeat="objReview in reviewsList | myCustomFilter:criteria" >  

In addition you should set an initial value for your controller's property criteria as otherwise your initial list will be empty as your filter will not match anything due to the comparison operator === which takes the operands' types into account and critiera will be undefined until you first enter something in your textbox.

app.controller('myController', function ($scope, reviewsFactory) 
    $scope.criteria = '';
    $scope.reviewsList =;