angular spincrement

Angular directive for jquery.spincrement

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.1/angular.js"></script>
<div ng-controller="MyCtrl">
    <div spincrement="value"></div>
</div>

JavaScript

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

app.directive('spincrement', function() {
    return {
        resctict: 'A',
        scope: {
            spincrement: '='
        },
        link: function(scope, elem) {
            scope.$watch('spincrement', function(newVal, oldVal) {
                elem.finish().prop('counter', oldVal || 0).animate({
                    counter: newVal || 0
                }, {
                    duration: 2000,
                    easing: 'swing',
                    step: function(now) {
                        $(this).text(Math.ceil(now));
                    }
                });
            });
        }
    };
});

app.controller('MyCtrl', function($scope, $timeout) {
    $scope.value = 0;
    $timeout(function() {
        $scope.value = 2000;
    }, 100);
    $timeout(function() {
        $scope.value = 1000;
    }, 3000);
});

angular.bootstrap(document, [app.name]);