An AngularJS Filter, modifies or transforms the data before passing the data to the view. We can use the filters in conjunction with AngularJS Expressions or Directives. In both cases, we must use a pipe “|”, which separates the filter with the expression or the directive.
For Example
<p> {{ bid | currency }} </p>
In the above example, I have declared an expression inside the curly braces, followed by an AngularJS filter called the currency. I’ll explain about this filter with other filters in this article, one by one.
Be advised, that Filters are case-sensitive. Therefore, you must carefully declare each filter in your web application.
* Using AngularJS “number” Filter
The filter number will format a given text and returns a numeric value. To prove our point, let’s see an example.
I have an <input> box that serves as the model. The view has an expression, which will display the values types in the <input> box. I want my users to type just numbers. However, by simply adding the expression in view won’t serve the purpose. Since, I have not applied any validation logic on the <input> box. Therefore, I have to use a filter with the expression.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</head>
<body>
<div ng-app>
<p>
<label>Enter a numberic value</label>
<input type="text" ng-model="numberval" />
</p>
<p> {{ numberval | number }} </p>
</div>
</body>
</html>Now, it will not restrict the user from entering any value, such as alphabets in the box. However, the expression with the filter number will pick up and display numbers only. That is, you must enter numbers only to see the result where the expression (inside curly braces) is declared. Try adding alphabets, and even alpha-numeric values, and it will return nothing.
Filter “number” with Decimal values
If you want to display decimal values with the numbers, you can add a parameter to the filter. For example, I want to display two decimal values with numbers. This is how I’ll do it.
<p> {{ numberval | number:2 }} </p>
👉 See this Demo
* Convert a Text to Uppercase Using AngularJS “uppercase” Filter
Use the uppercase filter to format a given text to upper case. If you have used CSS in your application, you must have come across text-transform property, which converts a text to either upper or lower case.
The uppercase filter in AngularJS is more efficient in this context. Therefore, I have covered this filter in detail, separately in another article. Please refer the below link.
<div ng-app>
<p>
<label>Enter your name (in lower case)</label>
<input type="text" ng-model="yourname" />
</p>
<p> {{ yourname | uppercase }} </p>
</div>Output
(it's an image)
👉 How to convert a String or a text to UPPERCASE in AngularJS. 
* Using AngularJS “lowercase” Filter
The AngularJS lowercase filter works the opposite of uppercase filter. Use the lowercase filter to an expression when you want to format the text values to lower case.
<div ng-app>
<p>Enter your name <input type="text" ng-model="tbName" /></p>
<p><input type="button" value="Lower Case" ng-click="name = tbName" /></p>
<p> {{ name | lowercase }} </p>
</div>