# AngularJS – ui-routing with ng-click not working properly

I’m using ui-router for creating some routes and I’m getting this very weird thing happening.

I have this route config

    .state('chapter_route', {
url: '/book/:chap',
templateUrl: "views/chapter.html",
params: { chap: null}
})


<a ui-sref="chapter_route({ chap: getChapter.title})">CHAPTER:</a>


It redirects me, as I wanted, to this following ui-view:

    <div class="panel panel-default">
<div class="panel-body">
<p>{{getChapter.title}}</p>
{{getChapter.content}}
</div>
</div>
......
......
<div class="panel panel-default" data-ng-repeat="cha in allChapters">
<div class="panel-body">
<a ui-sref="chapter_route({ chap: cha.title})" ng-click="changeChapter(chap)">{{cha.title}}</a> {{cha.content | limitTo: 100}}.
<button ng-click="changeChapter(article)">PRESS ME </button>
</div>
</div>


As you can see I have another <a> tag here that is supposed to send me to a different chapter and also changes the value of chapter

getChapter looks something like:

$scope.allChapters = [ { title: "title 1", chapter: "the whole chapter goes here" }, { title: "title 2", chapter: "the whole chapter 2 goes here" }, { title: "title 3", chapter: "the whole chapter 3 goes here" } ];$scope.getChapter = $scope.allChapters[0];  and changeChapter looks like this: $scope.changeChapter = function(chap){
$scope.getChapter = chap; console.log($scope.getChapter);
};


So here’s what’s really happening:
I start by showing the first chapter and create links for all the next chapters. If I click on the <a> tag it changes the value of getChapter and prints it on the console perfectly fine but it doesn’t change the ui-view for this chapter unless I click it again?!?!?
However if I decide to click on the button “PRESS ME” it changes directly into the next chapter in the ui-view.
I want to be able to click on the <a> tag and change to a different ui-view and at the same time having a different url, according to the chapter title.

Any ideas of what might be causing this weird error?

Thank you 🙂

Source: AngularJS

This site uses Akismet to reduce spam. Learn how your comment data is processed.