angular ui router - AngularJS: Update URL without full page load -

I'm trying to work my app so that I can update the URL, but not reloading the whole scene Able to I just want to update the model and want to change the URL to display the new item.

I am using this solution to get it:

But I have some problems with it:

1) Browser / Forward buttons do not work - so when I change the URL and change the model, then the model needs to be updated. / P>

2) Once I update the URL without reloading the page, clicking on the link next to it, such as the 'Books' menu options no longer work. I refresh the page I can get the navigation to work again.

Does anyone have a solution to these problems? I expected that this type of behavior is common in one page, so it seems that I am doing something wrong.

Anyway, I am using an angular route module, but

  $ routeProvider. When ('/ books', {title: 'books', templateUrl: CONFIG.static_url + '/html/books.html', Controller: 'BooksCtrl',}). When ('/ book /: itemId', {title: 'books', templateUrl: CONFIG.static_url + '/html/books.html', Controller: 'BooksCtrl'}). Otherwise ({RedirectTo: '/ books'});  

Then, in the run block, the code taken from the solution given above is me:

  // reloading to reload Stop  
 / TODO: Fix problem where back button does not reload the previous view / TODO: fixed issue where the menu link no longer loads the page after the original original = $ location.path; $ Location.path = function (path, reload) {if (reload === incorrect) {var lastRoute = $ route.current, un = $ rootScope $ ('$ LocationChangeSuccess', function () {$ route.current = last route;}); } Basic Return. Fife ($ location, [path]); };  

Finally, when I change the model asynchronously to load in a new item, then I update the URL:

  // url $ location.path ('/ book /' + ID, incorrect);