Шаблон не обнаруживает изменения значения флага после вызова API

Question

Я пытаюсь показать ошибку в зависимости от того, успешно ли возвращается вызов API:

У меня есть метод (outherMethod) следующим образом:

let isError = false
let a = 0

methodThatCallsApi() {
    return new Promise((resolve, reject) => {
        setTimeout(() => reject(), 1000)
    })
    .then((r) => { // do stuff })
    .catch((err) => { isError = true })
    .finally(() => { // do finally stuff })
}

outerMethod() {
    methodThatCallsApi().then(() => {
        a += 1
    })
}

В шаблоне:

<div class="error" data-ng-if="isError">ERROR!</div>

Я заметил, что a += 1 выполняется, и когда я выполняю шаг выполнения кода, он вызывает methodThatCallsApi и правильно устанавливает isError в true. Часть в моем шаблоне, которая показывает ошибку в зависимости от isError, однако, не отображается. Есть ли что-то особенное в angularJS, которое я пропускаю?

Примечание: я знаю, что состав цепочки обещаний не самый лучший, и что я могу переместить a += 1 в блоке finally, но я проверил это, добавив блок then после finally и он все равно будет выполняться, поэтому я не думаю, что цепочка обещаний будет вообще связана с моей проблемой. Вот пример, который я быстро протестировал:

let b = 4
new Promise((resolve, reject) => {
    setTimeout(() => resolve(1), 1000)
})
.then((r) => { console.log(r * 10) })
.catch((err) => { console.log(err) })
.finally(() => { console.log('finally!') })
.then((r) => { b += 1; console.log(b); })

Вывод:

10
finally!
5