AngularJS Simple filter example


Filters format the value of an expression for display to the user. They can be used in view templates, controllers or services. This example creates a filter (addZ) then uses it in a view. All this filter does is add a capital 'Z' to the end of the string.


angular.module('main', [])
    .filter('addZ', function() {
            return function(value) {
                return value + "Z";
    .controller('MyController', ['$scope', function($scope) {
        $scope.sample = "hello";


Inside the view, the filter is applied with the following syntax: { variable | filter}. In this case, the variable we defined in the controller, sample, is being filtered by the filter we created, addZ.

<div ng-controller="MyController">
   <span>{{sample | addZ}}</span>

Expected output