Angular page refresh on changing URL parameter in browser

Question

Extremely simple requirement but having a hard time with this. Have simple page where I print the parameter in the url path.

http://localhost:8888/ngtest.html#/1234567

ngtest.html

<div ng-app="app" ng-controller="testCtrl">
    {{myId}}
</div>

<script>
var app = angular.module('app', []);
app.controller('testCtrl', function($scope, $location) {
    $scope.myId = $location.$$path;
});
</script>

In the browser window:

1. change 1234567 to something like 1234
2. hit Enter

Nothing happens. Hit F5 and it works as expected.

Not sure if this has something to do with browser behavior but how to force the page to refresh after parameter change + Enter?

Answer 1

Complete example based on Leon's suggestion above

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>

<div ng-app="app" ng-controller="testCtrl">
    {{myId}}
</div>

<script>
var app = angular.module('app', []);
app.controller('testCtrl', function($scope, $location) {

    // add a listener for when the url changes and user
    // Enter in the address bar
    $scope.$on('$locationChangeStart', function(event) {
        $scope.myId = $location.$$path;
    }); 
});
</script>

Basically location this is registering a location change listener and doing things accordingly. No routing config required

Answer 2

Page refresh has been answered here.

You can use $route.reload();

As suggested here, you can try listening for route change success when hitting Enter in the url input:

scope.$on('$routeChangeSuccess') or scope.$on('$locationChangeSuccess').