Auto-update deep-linked url when model changes in Angular

Question

So. I've been messing around in AngularJS (which continues to amaze me every minute I work with it) and I was wondering, when using $routeProvider and $routeParams, is there any way to force the current url/location/deep-link in the location bar in the browser to automatically update when certain models change on the page?

Here is the app that I'm messing around with. Its the app from the tutorial on angular's site except I've screwed around with it and added in some features like pagination. If you notice, upon visiting this link you're redirected to #/phones//age/5/0. The first segment is the controller, while the last 4 describe filters, respectively, a text query, the "column" to sort by, number of items per page, and page number.

The controller for this takes these in through $routeParams and updates the models/views like normal but how can I force the url to change automatically when the user changes the models/views? So if you were to type xoom in the query box on the page when you first visit, the url in the location bar would change to http://brandonep.org/angular-test-phonecat/#/phones/xoom/age/5/0 as soon as you type it.

Thanks in advance! And sorry if I'm unclear but I tried my best :P

Answer 1

I would use parameters on your url (/?a=1&b=2), and then inject $routeParams into your controller to interpret the parameters on controller load.

Then you can use $watch to watch your model, and each time it changes set window.location.url. Here's an example: http://jsfiddle.net/andytjoslin/eYJmR/