Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including angular-counter with all npm packages installed. Try it out:

var angularCounter = require("angular-counter")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

angular-counter v0.2.1

An AngularJS directive to animate number increment/decrement.

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:

fromfloatInitial number.
tofloatTarget number to reach.
durationintegerDuration of the animation in ms.
effectstringEffect name.
stepfunctionCallback after each animation step.
Remember to $apply the scope!
finishfunctionCallback at the end of the animation.


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

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free