node package manager
We need your input. Help make JavaScript better: Take the 2017 JavaScript Ecosystem survey »


Angular Counter

Join the chat at

Angular Counter is a directive to animate number increment/decrement.

Check out the demo page at

Angular Counter



In your HTML file:

<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src="./js/angular-counter.js"></script>

In your JS code:

var app = angular.module('MyApp', ['counter']);


<!-- `counter` directive can be used as: Element / Class / Attribute -->
<div    class="counter"
       finish="ctrl.counterFinish()"> {{ ctrl.myValue | number:0 }} % </div>
<!-- bind counter value anywhere -->
<span ng-bind="ctrl.myValue"></span>

INFO: Animation starts every time the attribute to changes.


Angular Counter directive makes use of a built-in service $counter with a single .count(..) that requires the following parameters:

Parameter Type Description
from float Initial number.
to float Target number to reach.
duration integer Duration of the animation in ms.
effect string Effect name.
step function Callback after each animation step.
Remember to $apply the scope!
finish function Callback at the end of the animation.


Copyright (c) 2015 Indri Muska. Licensed under the MIT license.