How To Change The Url When Paging Using Ui Router?

I have an Angular JS project using Angular UI-Router which is going great but I am trying to implement the UI Bootstrap pagination directive and can't work out the correct strategy

Solution 1:

This is easily achievable with $stateParams

For example

$stateProvider
.state('contacts',{
 url: '/contacts',
 templateUrl: 'contacts.html'
}).state('contacts.paginated', {
    url: "/contacts/page-:pageNum",
    templateUrl: 'contacts.html',
    controller: function ($stateParams) {
        // If we got here from a url of /contacts/page-2
        expect($stateParams).toBe({pageNum: 2});
    }
})

I would choose a different pagination scheme however Either /contacts/page/1 or /contacts?page=1 both are easily achievable with ui-router