Passing a variable from a controller into a route param - angularjs

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