javascript - How to change the URL when paging using UI Router? -

i have angular js project using angular ui-router going great trying implement ui bootstrap pagination directive , can't work out correct strategy.

i have table of data shown 1 page @ time , have pagination directive in place showing correct number of page links. when click link gets new page number , makes restangular call api new records , binds them table.

that's working well, when page through data url doesn't change user can't use browser back/forward buttons navigate history. ideally use following urls:

/contacts /contacts/page-2 /contacts/page-3 

i include sorting in url that's question.

i achieve manually transitioning new state when 1 of pagination buttons clicked, reload controller , of it's contents, making additional ajax calls server , making ugly flashes of un-styled content recreated pagination control etc.

ideally able change url , add history state without triggering actual state change , reloading/running controller view. i'm not sure if possible, let alone how it.

anybody got ideas?

this achievable $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 got here url of /contacts/page-2         expect($stateparams).tobe({pagenum: 2});     } }) 

i choose different pagination scheme either /contacts/page/1 or /contacts?page=1 both achievable ui-router