Passing a variable from a controller into a route param

Question

....           

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

Hi! I have a variable in a specific controller and I want to pass it's value into a param for routing. Eventually I want to change the value of that variable so that I can create new urls using this same route.

I'm using ui-router, as you may have noticed.

I'm also curious on how would you solve the following problem: basically I want to open a specific chapter of a book, let's say chapter 5. Then I want to display at the left of the page a link for each remaining chapter, that's why I want to change the value of the variable. How would you solve this using ng-repeat? I'm thinking of using getArticle (as shown below) to get a chapter number and then ng-repeat the remaining chapters with ng-repeat? Ideas?

angular
    .module('BookLibrary')
    .controller("ChapterController", ["$scope","stateParams", "ChapterControllerService", function($scope, $stateParams, ChapterControllerService){

        $scope.chapterList = ChapterControllerService.chapters;
        $scope.getArticle = chapterList[0].chapter;

    }]);

chapterList looks like this:

chapterList = [
        { 
            chapter: "1",
            content: "Chapter 1 goes here"
        },
        {
            chapter: "2",
            content: "Chapter 2 goes here"
        },
        {
            chapter: "3",
            content: "Chapter 3 goes here"
        }
    ];

Answer 1

There are multiple questions here so to start with your state parameters. In the state params you can declare default values for params in a state like so.

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

This would default the value to null. Perhaps you always want to default to chapter 1? If that was the case you can use params: {chap: '1'} (since you are using strings). To pass a value to the state there are multiple ways to do it. Assuming you are using ui-sref you can hand parameter values right in the link.

ui-sref="books({ chap: 3 })"

However you want to have a list of links from an object using ng-repeat. So you could do something like this

<ul>     
   <li ng-repeat="chapter in chapterList">
      <a ui-sref="books({chap: chapter.chapter})">{{chapter.chapter}}</a>
   </li>
</ul>

You've included $stateParams in your controller already so you just need to grab the parameter from it like so

angular
.module('BookLibrary')
.controller("ChapterController", ["$scope","$stateParams", 
"ChapterControllerService", function($scope, $stateParams, 
ChapterControllerService){

    $scope.currentChapter = $stateParams.chap;

    $scope.chapterList = ChapterControllerService.chapters;
    $scope.getArticle = chapterList[0].chapter;

}]);