AngularJS Filters

Filters format a value before it is shown, without changing the original data.

Using a Filter

Add a filter to an expression with the pipe symbol, followed by the filter name. For example, {{ name | uppercase }}.

Example

html

<div ng-app="" ng-init="name='Hamza Ali'; city='KARACHI'">
  <p>{{ name | uppercase }}</p>
  <p>{{ city | lowercase }}</p>
</div>

Output

HAMZA ALI
karachi

Some filters take an argument after a colon, for example {{ price | currency:'Rs ' }}.

Built-in Filters

Filter	Example	Result
`uppercase`	`'ali'`	`ALI`
`lowercase`	`'ALI'`	`ali`
`currency`	`1500` with `'Rs '`	`Rs 1,500.00`
`number`	`12345.678` with `2`	`12,345.68`
`date`	a date with `'dd/MM/yyyy'`	`15/10/2026`
`json`	an object	the object as JSON text
`limitTo`	an array or string with `3`	the first 3 items
`orderBy`	an array with `'price'`	the array sorted by price
`filter`	an array with a search text	only matching items

Formatting Numbers and Dates

Example

html

<div ng-app="formatApp" ng-controller="FormatController">
  <p>Fee: {{ fee | currency:'Rs ' }}</p>
  <p>Fee without decimals: {{ fee | currency:'Rs ':0 }}</p>
  <p>Students: {{ students | number }}</p>
  <p>Exam date: {{ examDate | date:'dd MMM yyyy' }}</p>
</div>

<script>
angular.module("formatApp", []).controller("FormatController", function ($scope) {
  $scope.fee = 15000;
  $scope.students = 1250;
  $scope.examDate = new Date(2026, 11, 5);
});
</script>

Output

Fee: Rs 15,000.00
Fee without decimals: Rs 15,000
Students: 1,250
Exam date: 05 Dec 2026

Sorting with orderBy

orderBy sorts arrays inside ng-repeat. Put a minus sign before the field to sort in reverse.

Example

html

<div ng-app="shopApp" ng-controller="ShopController">
  <ul>
    <li ng-repeat="p in products | orderBy:'-price'">{{ p.name }}: Rs {{ p.price }}</li>
  </ul>
</div>

<script>
angular.module("shopApp", []).controller("ShopController", function ($scope) {
  $scope.products = [
    { name: "Mouse", price: 1200 },
    { name: "Keyboard", price: 2500 },
    { name: "USB Drive", price: 900 }
  ];
});
</script>

Output

Keyboard: Rs 2500
Mouse: Rs 1200
USB Drive: Rs 900

A Live Search with filter

The filter filter keeps only the items that match. Connected to an input, it creates a live search box:

Example

html

<div ng-app="shopApp" ng-controller="ShopController">
  <input ng-model="search" placeholder="Search products">
  <ul>
    <li ng-repeat="p in products | filter:search">{{ p.name }}</li>
  </ul>
</div>

Output

(typing "us")
Mouse
USB Drive

You can chain filters one after another, such as filtering first, then sorting with orderBy, then taking the first five with limitTo:5.

A Custom Filter

You can create your own filter on a module. This one adds "Rs" and thousands commas to an amount:

Example

angular.module("shopApp").filter("rupees", function () {
  return function (amount) {
    return "Rs " + Number(amount).toLocaleString("en-US");
  };
});

Example

html

<p>{{ 250000 | rupees }}</p>

Output

Rs 250,000

Filters run very often, on every change check. Keep them fast and simple. For big lists, filter the data once in the controller instead.

Exercise

Which filter sorts an array in ng-repeat?

sortlimitToorderByfilter