Why does the template redraw only after interacting with page elements?

Question

Angular

There is such a function, it works fine, in the console it displays everything perfectly, in a timely manner, but the timer value in the template is updated only if you click on some input or button

$scope.startTime = function(){

                var Timer;
                var TotalSeconds;

                function CreateTimer(TimerID, Time) {
                    TotalSeconds = Time;
                    UpdateTimer();
                    setTimeout(Tick, 1000);
                }

                function Tick() {
                    if (TotalSeconds <= 0) {
                        return 0;
                    }
                    TotalSeconds -= 1;
                    UpdateTimer();
                    setTimeout(Tick, 1000);
                }

                function UpdateTimer() {
                    var Seconds = TotalSeconds;
                    var Days = Math.floor(Seconds / 86400);
                    Seconds -= Days * 86400;
                    var Hours = Math.floor(Seconds / 3600);
                    Seconds -= Hours * 3600;
                    var Minutes = Math.floor(Seconds / 60);
                    Seconds -= Minutes * 60;
                    var TimeStr = Days > 0 ? Days + "days " : "" + LeadingZero(Hours) + ":" + LeadingZero(Minutes) + ":" + LeadingZero(Seconds);
                    $scope.testTimeout();
                    $scope.test_timer = TimeStr;
                    $scope.$digest();
                }

                function LeadingZero(Time) {
                    return (Time < 10) ? "0" + Time : +Time;
                }

                CreateTimer('timer', getTimeout());
            }

Answer 1

Apparently, you do not reach $scope.$digest.
To solve the problem, you need to use the angular $timeout.