Angularjs просмотр не обновляет изменения

Question

Я пытаюсь создать приложение онлайн-викторины, используя весеннюю загрузку, и angularjs. Теперь у меня есть проблема, и я пытаюсь ее решить.
Во-первых, у меня есть следующий код для динамического создания элемента, в моем случае я хочу сгенерировать кнопку

vm.generateButton = function (number) {
    addElement('buttons', 'button', number, 'button-' + number);

}

function addElement(div, type, value, id) {
    //Create an input type dynamically.
    var element = document.createElement("input");
    //Assign different attributes to the element.
    element.type = type;
    element.value = value; 
    element.id = id; 
    element.onclick = function () { 
        _navigateQuestionNumber(value);
    };
    element.classList.add('btn', 'btn-default');

    var foo = document.getElementById(div);
    //Append the element in page (in span).
    foo.appendChild(element);
}

и

function _navigateQuestionNumber(number) {
    console.log(number);
    vm.questionNumber = number;
    console.log(vm.questionNumber);
    ....
}

Проблема в том, что когда я нажимаю на кнопку, вызывается функция _navigateQuestionNumber, как и ожидалось, но переменная vm.questionNumber не связывается при просмотре, хотя ее значение в контроллере изменилось. Другие части работают как положено.

<div layout:fragment="content" ng-controller="TestController as testCtrl">
<span>{{testCtrl.questionNumber}} of {{testCtrl.questions.length}}</span>
...

Можете ли вы помочь мне объяснить это? И как это исправить? Спасибо.