Невозможно изменить ng-href onClick event

Question

У меня есть нижний колонтитул с button в моем angular приложении. Кнопка имеет атрибут ng-href, который должен измениться во время события ng-click, чтобы повлиять на механизм маршрутизации. По какой-то причине я не могу сделать эту работу. Конечная цель состоит в том, чтобы добавить числа, от 1 до пяти нажатий каждой кнопки.

Колонтитул является component:

app.component('footerx', { 
    bindings: { 

    }, 
    templateUrl: 'views/footer.html', 
    controller: function() { 
     this.buttonText = "Next"; 
     var self = this; 
     var i = 1; 
     this.changeHref= function() { 
      self.questionIndex=i; 
      i++; 
     } 
    } 
}); 

Footer HTML:

<footer class="footer"> 
    <div class="container"> 
     <a class="btn btn-primary" ng-click="$ctrl.changeHref()" ng-href="#/quiz/{{questionIndex}}" id="btn">{{$ctrl.buttonText}}</a> 
    </div> 
</footer> 

Routing JS часть:

... 
     .when("/quiz/:index", { 
      templateUrl: "views/questionPage.html", 
      controller: "questionController" 
     }) 
... 

EDIT: Сейчас url не полностью изменить. Это означает, что у него нет questionIndex. Это выглядит следующим образом:

http://localhost/myApp/#/quiz/ 

Answer 1

Использование "#/quiz/{{$ctrl.questionIndex}}

<footer class="footer"> 
    <div class="container"> 
     <!-- REMOVE 
     <a class="btn btn-primary" ng-click="$ctrl.changeHref()" 
        ng-href="#/quiz/{{questionIndex}}" id="btn"> 
      {{$ctrl.buttonText}} 
     </a> 
     --> 
     <!--ADD --> 
     <a class="btn btn-primary" ng-click="$ctrl.changeHref()" 
        ng-href="#/quiz/{{$ctrl.questionIndex}}" id="btn"> 
      {{$ctrl.buttonText}} 
     </a> 
    </div> 
</footer>