AngularJS multiple number counter end all at the same time

I am trying to have 4 number counters that start at 0 and go to an undetermined amount, in my demo I have chosen 4 numbers: 708687, 784, 19.9, 567856. These 4 numbers are passed into the directive and could any amount. I am trying to figure out how I can count these 4 numbers up from 0 to their max amount in the same amount of time, being 5 seconds. So it would take 5 seconds to count from 0 to 708687 and 5 seconds to count to 19.9. I cant seem to think through the correct logic to achieve this goal.

AnulgarJs Directive Code

angular.module('cuApp')
    .directive('cuImpactCounter', ['$compile', function ($compile) {
        return {
            restrict: 'AE',
            scope: {
                levelUpSavings: '@',
                autoLoanSavings: '@',
                dividends: '@',
                mortgage: '@'
            },
            template: 
                    '<div class="row">' +
                        '<div class="container">' +
                            '<div class="row impactCounterRow">' +
                                '<div class="col d-flex text-center flex-column  impactCounter impactCounterSquare orangeSquare">' +
                                    '<i class="fal fa-money-bill-alt fa-2x"></i>' +
                                    '<div><h2 class="h1">${{ model.levelUpSavingsTotal }}</h2></div>' +
                                '</div>' +
                                '<div class="col d-flex text-center flex-column impactCounter impactCounterSquare blueSquare">' +
                                    '<i class="fal fa-car fa-2x"></i>' +
                                    '<div><h2 class="h1">${{ model.autoLoanSavingsTotal }}</h2></div>' +
                                '</div>' +
                                '<div class="col d-flex text-center flex-column impactCounter impactCounterSquare greenSquare">' +
                                    '<i class="fal fa-chart-line fa-2x"></i>' +
                                    '<div><h2 class="h1">${{ model.dividendsTotal | number: 1 }} M</h2></div>' +
                                '</div>' +
                                '<div class="col d-flex text-center flex-column impactCounter impactCounterSquare greySquare">' +
                                    '<i class="fal fa-home-heart fa-2x"></i>' +
                                    '<div><h2 class="h1">${{ model.mortgageTotal }}</h2></div>' +
                                '</div>' +
                            '</div>' +
                        '</div>' +
                    '</div>',
            link: function (scope) {
                scope.model = {
                    levelUpSavingsTotal: 0,
                    autoLoanSavingsTotal: 0,
                    dividendsTotal: 0,
                    mortgageTotal: 0
                }

                var levelUpSavings = scope.levelUpSavings;
                var counter = 0;
                function levelUpSavingsTimeLoop() {
                    setTimeout(function() {
                        counter +=5000; 

                        if(counter > levelUpSavings) 
                            counter = levelUpSavings;

                        scope.model.levelUpSavingsTotal = counter;
                        scope.$digest();

                        if (counter < levelUpSavings) {
                            levelUpSavingsTimeLoop();
                        }
                    }, 1); //1 millisecond loop
                }
                levelUpSavingsTimeLoop();

                var autoLoanSavings = scope.autoLoanSavings;
                var counter1 = 0;
                function autoLoanTimeLoop() {
                    setTimeout(function() {
                        counter1 +=3; 

                        if(counter1 > autoLoanSavings) 
                            counter1 = autoLoanSavings;

                        scope.model.autoLoanSavingsTotal = counter1;
                        scope.$digest();

                        if (counter1 < autoLoanSavings) {
                            autoLoanTimeLoop();
                        }
                    }, 1); //1 millisecond loop
                }
                autoLoanTimeLoop();

                var dividendSavings = scope.dividends;
                var counter2 = 0;
                function dividendsSavingsTimeLoop() {
                    setTimeout(function() {
                        counter2 +=0.08; 

                        if(counter2 > dividendSavings) 
                            counter2 = dividendSavings;

                        scope.model.dividendsTotal = counter2;
                        scope.$digest();

                        if (counter2 < dividendSavings) {
                            dividendsSavingsTimeLoop();
                        }
                    }, 1); //1 millisecond loop
                }
                dividendsSavingsTimeLoop();

                var mortgageSavings = scope.mortgage;
                var counter3 = 0;
                function mortgageSavingsTimeLoop() {
                    setTimeout(function() {
                        counter3 +=5000; 

                        if(counter3 > mortgageSavings) 
                            counter3 = mortgageSavings;

                        scope.model.mortgageTotal = counter3;
                        scope.$digest();

                        if (counter3 < mortgageSavings) {
                            mortgageSavingsTimeLoop();
                        }
                    }, 1); //1 millisecond loop
                }
                mortgageSavingsTimeLoop();

            }
        };
    }
    ]);