Angular change url without executing routeprovider

I'm trying to make facebook-like modal windows - for example you click on image and it opens in modal window and the url changes from / to /img/dj27s_D without rerendering the views and when you close the modal the url goes back to /.

I figured out that using

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

will just crash the application on the next $digest. I have also tried

$location.path = '';

but nothing happens. If I execute


The $routeProvider will kick in and change the views. I dont want this to happen, just want to temporary change the url while the modal is opened.


You can set the router to use the previous route. For example this way in your controller:

lastRoute = $route.current;
$scope.$on('$locationChangeSuccess', function (e) {
  if (window.location.href.match(/\/view/) || window.location.href === '/') {
    $route.current = lastRoute;

When $route.current does not change, full page refresh is not triggered. You might wish to do some regexp checks to keep your URL space tidy to prevent refresh, but it's a small price to pay.

I recommend looking at the Angular UI-Router. You might be able to do what you're describing with a nested state / nested view, where the inner view pops up the modal. You can configure the URLs for each state as you want.

Edit: There may be a way without using UI-Router, but I haven't done that. Perhaps this other SO question is relevant to you.

A simple partial example of UI Router with a nested view, you'd put this in your controller:

$stateProvider.state('site', {
    url: "",
    templateUrl: 'app/parent.tpl.html',
    controller: 'ParentCtrl'

$stateProvider.state('site.child', {
    url: "/child",
    templateUrl: 'app/child.tpl.html',
    controller: 'ChildCtrl'

Then in the parent template, put this type of div:

<div ui-view></div>

which will be where the child template will load within the parent template. In the child template, you could try the modal dialog.


 ? Angular js - call a route without view
 ? .config $routeprovider angularjs
 ? Angular JS not loading view
 ? AngularJS directive vs routeProvider
 ? controller not found through routeProvider
 ? routeProvider not working correctly
 ? AngularJS redirecting to another ng-app module
 ? Issue in angular js routeProvider
 ? Refreshing browser web-page not load in ui-router when locationProvider used
 ? Sum function from the data-* attribute inside a table row