AngularJS Custom Filter Function with Example

  Keywords : What is custom filter in angularjs, How to create custom filter in angularjs with example, Use of custom filters in angularjs with example, Implement custom filter in angularjs with example.

Here we will lear custom filtersin angularjs, use of custom filters and how to create custom filters in angularjs applications with example,

AngularJS Custom Filter

In angularjs custom filters are used to create our own filters to format data and it will increase reusability of code. Suppose in angularjs application if we need common format of data in multiple pages then it's better to use custom filter. By creating custom filters we can reduce redundancy of code in angularjs applications.

Syntax of AngularJS Custom Filter

Following is the syntax of using custom filters in angularjs application.


{{ customexpression | customfilter }}

We will see how to create and use custom filter in angularjs with simple example.

Example of Custom Filter in AngularJS

Following is the example of creating custom filter in angularjs to format data.


Live Preview

<!DOCTYPE html>

<html xmlns="">



AngularJs Custom Filter Example


<script src=""></script>

<script type="text/javascript">

var app = angular.module('angularcustomapp', []);

app.filter('convertUpper', function () {

return function (item) {

return item.toUpperCase();



app.controller('CustomCtrl', function ($scope) {

$ = 'Welcome to';




<body ng-app="angularcustomapp">

<div ng-controller="CustomCtrl">


{{ name | convertUpper }}





If you observe above code we created custom filter "convertUpper" to convert text to uppercase and used it in code to format name field. Now we will run and see the output of example.

Output of AngularJS Custom Filter Example

Following is the result of custom filter example in angularjs application.



This is how we can create and use custom filters in angularjs applications.