Angular Odometer

angular-odometer lets you use Hubspot Odometer as angular directive

Demo page

Demo

Installation

Install depedencies using bower:

bower install angular-odometer

Add js libraries to your application:

    ...
    <script src="bower_components/angular-odometer/dist/angular-odometer.js"></script> 
    <script src="bower_components/odometer/odometer.min.js"></script> 
    ...

Add css stylesheets to your application:

    <link rel="stylesheet" href="bower_components/odometer/themes/odometer-theme-minimal.css"/>

Add ngOdometer module to you application

    ...
    angular
      .module('myAwesomeApp', [
        ...
        'ngOdometer',
        ...
      ])
    ...

Usage

All you need is to place a ngOdometer with its attribute in your view like the following piece of code:

    ...
        <ng-odometer value="1234"></ng-odometer>
    ...

value: the odometer value, can be dynamically set through controller scope variable, e.g. : value="{{myScopeVariable}}". The value can also be refresh, the transition from one value to the other will be automatically done.

Brower compatibility

Chrome: 35 Safari: 7