AngularJS $location doesn't work with google.maps.event listener

Question

I initialize a google map within a angularJS controller and add a listener to map event

google.maps.event.addListener(map, 'dragend', MapMoveAround);
......
function MapMoveAround() {
    console.log($location.url());
    $location.path('/other_path');
    console.log($location.url());
}

The console shows the url is changed when I trigger the google map event, but I stay at the old page. If I change $location.path('/other_path') to

window.location.replace('/#/other_path')

it will go the new page, but "Back" button won't work.

Can anyone provide an AngularJS solution for it?

Answer 1

Run angular code through events will not run the digest cycle, in this case you need to run it manually using $scope.$apply() in order to getting work your $location changes.

Code

google.maps.event.addListener(map, 'dragend', MapMoveAround);
......
function MapMoveAround() {
    console.log($location.url());
    $scope.$apply(function(){
      $location.path('/other_path');
    })
    console.log($location.url());
}

Answer 2

following code also working fine for ...

 google.maps.event.addListener(map, 'dragend', MapMoveAround);
......
function MapMoveAround() {
  console.log($location.url());
  $timeout(function() {
    $location.path('/other_path');
  }, 500)
  console.log($location.url());
}