How can I use an AngularJS filter to format a number to have leading zeros?

Let's say you have a module called myModule in your app myApp:

angular.module('myApp', ['myModule']);

Define your filter in in this module:

angular.module('myModule', [])
    .filter('numberFixedLen', function () {
        return function (n, len) {
            var num = parseInt(n, 10);
            len = parseInt(len, 10);
            if (isNaN(num) || isNaN(len)) {
                return n;
            }
            num = ''+num;
            while (num.length < len) {
                num = '0'+num;
            }
            return num;
        };
    });

Use your filter in markup:

{{myValue | numberFixedLen:4}}

Keeping it minimal... (works with both strings & numbers) Do some validation if you have to (isNumber, NaN)

// 1e32 is enogh for working with 32-bit
// 1e8 for 8-bit (100000000)
// in your case 1e4 (aka 10000) should do it
app.filter('numberFixedLen', function () {
    return function(a,b){
        return(1e4+a+"").slice(-b)
    }
});

html:

{{myValue | numberFixedLen:4}}

Note This has less flexibility and this will only work for numbers lower then 10000 if it's a bigger number you would have to increase both 4 and 1e4 or use any other dynamic solution.
This was intended to do as little as possible as fast as possible.

It is intentionally the same thing as doing:

("10000"+1234567).slice(-4) // "4567"

Minimum code with underscore.string's padding function and the angular-underscore-string filter:

working demo in jsFiddle

angular string input -> angular-underscore-string filter -> underscore.string

<div ng-app="app" ng-controller="PadController">
   <div ng-repeat="num in nums">{{ num | s: 'pad':[4, '0'] }}</div>
</div>

angular.module('app', ['underscore.string']).controller('PadController', function ($scope) {
    $scope.nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
});

// 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15

The s variable refers to the string library. In older versions you might have to substitute it for "_.str", ie. {{ num | _.str: 'pad':[4, '0'] }}

You could just use pure JavaScript such as

('00000'+refCounter).substr(-5,5)

for padding with 5 zeros the value of refCounter.

NOTE: Make sure to check that refCounter is not undefined, otherwise you'll get an exception.

Pls use the below filter modify if required for some modifications

  app.filter('customNo', function () {
            return function (input) {
                var n = input;
                return (n < 10) ? '000' + n : (n < 100) ? '00' + n : (n < 1000) ? '0' + n : '' + n;
            }
        });


<span>{{number|customNo}}</span>

If you are dealing exclusively with "0" padding and don't mind tailoring your filters by use case, I'd go with something similar to Endless's answer for speed but would recommend you make sure the number isn't already long enough with something like:

app.filter('minLength', function () {
    return function(input,len){
        input = input.toString();
        if(input.length >= len) return input;
        else return("000000"+input).slice(-len);
    }
}); 

As this will not only save it from trimming numbers or strings that already satisfy the minimum length which is important to avoid weird stuff like:

{{ 0.23415336 | minLength:4 }} //Returns "0.23415336" instead of "5336" like in Endless's code

But by using "000000" instead of a number like 1e6 you avoid both changing the actual value of the input (by not adding 1000000 to it) and avoid the need to implicitly convert the number to a string thereby saving a computational step considering the input would already be a converted to a string to avoid the clipping issue mentioned above.

If you want a system that doesn't need any use-case testing that's both faster and more flexible than bguiz's solution I use a filter like:

app.filter('minLength', function(){
  return function(input, len, pad){
    input = input.toString(); 
    if(input.length >= len) return input;
    else{
      pad = (pad || 0).toString(); 
      return new Array(1 + len - input.length).join(pad) + input;
    }
  };
});

This allows you to do the standard:

{{ 22 | minLength:4 }} //Returns "0022"

But also gives you the option to add non-zero padding options like:

{{ 22 | minLength:4:"-" }} //Returns "--22"

and you can enforce wacky stuff with numbers or strings like:

{{ "aa" | minLength:4:" " }} //Returns "  aa"

Plus, if the input is already longer than your desired length, the filter will just pop it back out without any trimming:

{{ 1234567 | minLength:4 }} //Returns "1234567"

You also avoid the need to add validation for len because when you call the filter without a len argument, angular will throw a RangeError in your console at the line where you try to create an array of length null making it simple to debug.

Another example:

// Formats a number to be at least minNumberOfDigits by adding leading zeros
app.filter('LeadingZerosFilter', function() {
  return function(input, minNumberOfDigits) {
    minNumberOfDigits = minNumberOfDigits || 2;
    input = input + '';
    var zeros = new Array(minNumberOfDigits - input.length + 1).join('0');
    return zeros + input;
  };
});

No filter required, Just use an expression in your html

{{("00000"+1).slice(-6)}}      // '000001'

{{("00000"+123456).slice(-6)}} // '123456'

The cleanest would be to create your own filter in angular and use it. There's already a few answers for this but personally I find this easiest to read. Create a array by the length of zeros needed then join the array with zero.

myApp.filter('customNumber', function(){
    return function(input, size) {
        var zero = (size ? size : 4) - input.toString().length + 1;
        return Array(+(zero > 0 && zero)).join("0") + input;
    }
});

Use it like:

{{myValue | customNumber}}

I also made it so you can specify leading zeros as a parameter:

{{myValue | customNumber:5}}

Demo: http://www.bootply.com/d7SbUz57o8