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}
})

So when I clink on:

<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 using ng-click and prints it on the console perfectly fine but it doesn't change the ui-view for this chapter unless I click it again. I can see the ui-view change for a fraction of a second but it doesn't stay, it quickly loads the ui-view for the first chapter. But if I click again, it shows the chapter I'm clicking on. So, I need to click twice for it to change which is very weird.

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 :)

EDIT:

https://plnkr.co/edit/D6f9Q3fhL294DukEZFOz?p=preview

I added a simple plunker with the issue we're discussing so you can have a better view of what I'm talking about.

The issue is with your controller code $scope.getChapter = $scope.allChapters[0]; here for all case you are hard coding current chapter with first chapter, so in all case it will render the same only. Replace it with if (!$stateParams.chap) { $scope.selectedChapter = $scope.allChapters[0]; }. It will solve your issue. Updated Plunker with Fix