In Angu­lar, fil­ters give us a nice way to for­mat the data we use in our apps, or present to the user. Angu­lar pro­vides a sub­set of fil­ters out of the box, or we can write our own. In this post we’ll do just that.

Cre­ation

To cre­ate a fil­ter, we sim­ply attach it to our mod­ule, name it, and return the data input.
Note: It is best prac­tice to cre­ate a mod­ule for your fil­ters, aside from your main module.
angular.module('myApp')
  .filter('slug', function () {
    return function (input) {
      if (input) {
        return input;
      }
    };
  });
Ok, so the above fil­ter is get­ting our data argu­ment, and return­ing it, but not doing any­thing. Let’s give it some actual fil­ter­ing to do. We’ll setup our fil­ter to nor­mal­ize the data passed to it, by forc­ing it to low­er­case, and replac­ing any spaces with underscores.
angular.module('myApp')
  .filter('slug', function () {
    return function (input) {
      if (input) {
        return input.toLowerCase().replace(/[^a-z_]/g, '_');
      }
    };
  });

Invok­ing

Now that we’ve got this sweet fil­ter, let’s use it. Angu­lar gives us the option of invok­ing fil­ters in either HTML or JS. We’ll go over both.
First, HTML. We call our fil­ter inside an expres­sion using the pipe char­ac­ter inside the {{ }} syn­tax. This allows us to pipe our date into our expres­sion as an argument.
{{ 'Rob Stinogle' | slug }}

// Displays: rob_stinogle
Sec­ond, Javascript. We can invoke our fil­ter by inject­ing the $fil­ter depen­dency into our con­troller. We then have access to both Angular’s and our fil­ters, includ­ing our cus­tom slug fil­ter. We can pass both our fil­ter name and data as arguments.
angular.module('myApp')
  .controller('myCtrl', function ($scope, $filter) {
    var userName = 'Rob Stinogle';
    $scope.userSlug = $filter('slug')(userName);
    console.log($scope.userSlug);
  });

// Displays: rob_stinogle
reference from: http://robandlauren.com/2014/01/29/custom-filters-angularjs/