Clean URLs with AngularJS and modal dialog boxes

Question

I'm using AngularJS + the "modal" directive provided by UI Bootstrap. The modal dialog box works great, but I have one problem: the URL isn't changing.

For example, my AngularJS app has a route set up for "/people", which displays a list of people. When the user clicks on a person, a modal dialog box comes up and shows detailed info. I am trying to figure out how to modify the URL without actually causing the $routeProvider to re-execute the controller.

For example, I could have something like this in my routes:

$routeProvider.
when('/people', {controller: PeopleCtrl, templateUrl: 'templates/people.html'}).
when('/people/:personId', {controller: PeopleCtrl, templateUrl: 'templates/people.html'}).

Then in my PeopleCtrl I can do:

if ($routeParams.personId) {
    $scope.editPerson({id: $routeParams.personId});
}

Which basically calls the same function that I bind with ng-click on the rows of people. This works in terms of allowing my app to respond to a URL like /people/123, but I can't figure out how to get the URL to jump from /people to /people/123 and then back to /people as the modal dialog box opens and closes.

Obviously, I can just call $location.path("/people") but the issue with that is that PeopleCtrl gets re-exceuted and I want to avoid that since the state "behind" the modal should be preserved.

In other words: I'm looking for a way to change the URL/location without the normal $routeProvider changes getting detected.

Thanks!

Answer 1

Found another SO post which did exactly what I was looking for:

function MyCtrl($route, $scope) {
    var lastRoute = $route.current;
    $scope.$on('$locationChangeSuccess', function(event) {
        $route.current = lastRoute;
    });
}