Angular Counter 

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

{{ ctrl.myValue | number: 0 }}%
If you use Bootstrap progress bars remember to remove transition rule in your stylesheet!
Finish

Installation

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="./js/angular-counter.js"></script>
var app = angular.module('MyApp', ['counter']);

Usage

<!-- `counter` directive can be used as: Element / Class / Attribute -->
<div    class="counter"
        value="ctrl.myValue"
           to="ctrl.myTarget"
     duration="ctrl.myDuration"
       effect="ctrl.myEffect"
       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.

Service

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.
Fork me on GitHub