Дождитесь выполнения функции, пока новые данные не отобразятся в браузере

У меня есть объекты Answer с свойством Id которое также используется для тега Id внутри разметки HTML внутри ng-repeat.

<div ng-repeat="answer in question.Answers">
    <div class="input-group">
        <div class="input-group-addon">
            <input type="number" style="width:40px" ng-model="answer.AnswerOrder"/>
        </div>
        <input type="text" class="form-control" id="answer-{{answer.Id}}"placeholder="Question Text" ng-model="answer.AnswerText"/>
    </div>
</div>
<div class="input-group">
        <div class="input-group-addon"><input type="number" style="width:40px" ng-model="answer.AnswerOrder" disabled/></div>
        <input type="text" class="form-control" placeholder="Click to add answer" ng-click="addAnswerToQuestion(question)"/>
</div>

Когда пользователь нажимает на вход "Нажмите, чтобы добавить ответ", он запускает метод addAnswerToQuestion(question) который является следующим в моем контроллере:

var newQuestionCounter = 0;
$scope.addAnswerToQuestion = function (question) {
    newQuestionCounter++;
    question.Answers.push({
        Id: ('n'+newQuestionCounter),
        AnswerText: '',
        IsCorrect: false,
        AnswerOrder: 0,
        QuestionId: question.Id
    });
    document.getElementById('answer-n' + newQuestionCounter).focus();

}

Идея состоит в том, чтобы представить иллюзию, что вы все еще находитесь на одном элементе, но на самом деле элемент "Нажмите, чтобы добавить ответ" не изменяется, и ваш фокус просто переключается на новый Answer.

Проблема в том, что document.getElementById получает вызов до привязки данных и обновляется ng-repeat. Поэтому document.getElementById не находит элемент.

Как я могу дождаться завершения всех двухсторонних привязок данных или есть лучший способ выполнить то, что я пытаюсь сделать?