animating number change in directive in angular - angularjs

Question

I have a directive which I have included jquery's animate functionality in to. I'd like for a particular variable's number to change with easing animation. The issue is that then the directive loads, the initial number is shown but doesn't show the number changing with the animation effect.
I have created a similar version in Plunkr to make it easy to see what's going on.
If I trigger $apply() from elsewhere the final numbers show, skipping the whole animated sqeuqnce of numbers. Also, in the code when I try to do apply on each step, it throws an 'in progress' error.
This plugin almost does what I need it to, except that it doesn't increment over decimal places and doesn't use easing. http://sparkalow.github.io/angular-count-to/
scope.$watch('difference', function(newVal, oldVal) {
jQuery({someValue: oldVal}).animate({someValue: newVal}, {
duration: 1000,
easing:'swing',
step: function(e) {
scope.display = e.toFixed(2);
scope.$parent.$apply();
}
});
});
and..
template: function(scope, element, attrs) {
return '<h3>' +
'<i class="fa progress-arrow" ng-class="[{\'fa-caret-up\': direction_up}, {\'fa-caret-down\': direction_down}]" aria-hidden="true"></i> ' +
'{{ display }}' +
'</div>' +
'</h3>' +
'<label>{{ label }} (lbs)</label>';

Answer 1

The answer was to use the angular $timeout function in conjunction with scope.$apply().
Here's the updated code that does in fact work:
scope.$watch('difference', function(newVal, oldVal) {
jQuery({someValue: oldVal}).animate({someValue: newVal}, {
duration: 500,
easing:'swing',
step: function(e) {
$timeout(function () {
scope.$apply(function () {
scope.display = e.toFixed(2);
});
});
}
});
And here it is in Plunkr

Answer 2

create directive
export class IncrementCounterDirective implements AfterViewInit {
#Input('appIncrementCounter') to: number = 0;
constructor(private elRef: ElementRef, private renderer: Renderer2) {}
ngAfterViewInit(): void {
this.counterFunc(this.to, 2000);
}
private counterFunc(end: number, duration: number = 3000) {
let range, current: number, step, timer: any;
range = end - 0;
current = end - 150;
step = Math.abs(Math.floor(duration / range));
// console.log(`step`, step);
timer = setInterval(() => {
current += 1;
this.setText(current);
if (current >= end) {
clearInterval(timer);
}
}, step);
}
setText(n: number) {
this.renderer.setProperty(this.elRef.nativeElement, 'innerText', `${n}`);
}
}
To use
<h3 class="stat-count" [appIncrementCounter]="607">000</h3>