Ng-if/ng-hide не обновляется в режиме реального времени на HTML-странице.

---

Всем Привет,

Мне нужна некоторая помощь в реализации небольшого изменения в angularJs с помощью typescript. В основном мне нужно изменить текст кнопки в течение 3 секунд с момента ее нажатия и вернуть исходный текст по истечении 3 секунд. Для этого я создал 2 html-элемента (кнопки). Для этой цели я применил директиву ng-if. В принципе, моя цель состоит в том, что как только будет нажата первая кнопка, она должна быть скрыта, а другая кнопка должна отображаться всего на 3 секунды. Через 3 секунды первая кнопка должна появиться снова.

Что я уже пробовал:

Ниже приведены 2 html кнопки:

<div class="action">
                            <button class="configure-link" ng-if="!showPhoneNumber" ng-click="testAudio()">Listen</button>
                            <button class="configure-link" ng-if="showPhoneNumber"> Calling {{phonenumber}}</button>
                        </div>

Как мы видим, 'showPhoneNumber' - это логическая переменная. Когда это ложь, первая кнопка должна быть видна, а когда это правда, вторая кнопка должна быть видна. Ниже приведен способ изменения значения этой логической переменной в файле typescript:

Машинописный текст:

scope.showPhoneNumber = false;
scope.testAudio = () =>{
scope.showPhoneNumber = true;
                setTimeout(function () { scope.showPhoneNumber = false }, 3000);
}

Как только я нажимаю первую кнопку, showPhoneNumber становится истинным, а первая кнопка скрывается, и я вижу вторую кнопку. Однако проблема в том, что требуется гораздо больше 3 секунд (около 20 секунд), чтобы вернуться назад и снова показать первую кнопку. Почему ng-if не привязывается от true к false через 3 секунды. Я не знаю, где я ошибаюсь. Не могли бы вы помочь?

---