To solve the issue, add a / (slash) to the specified url in the route setup

Encountered a similar dilemma today where I had a hyperlink on my webpage that needed the ng-view to refresh every time it was clicked to retrieve updated data from the server. Unfortunately, Angular would not reload the ng-view if the URL stayed the same.

After some troubleshooting, I discovered a workaround. On the webpage, I set the href of the link as:

• <a href="#/example">example</a>

However, in the route configuration, I defined:

• $routeProvider.when('/example/', {
  controller: MyController,
  templateUrl:'/static/example.html'
  });

The key difference here is the trailing slash in the URL. When initially clicking href="#/example", Angular automatically redirects the URL to #/example/ and loads the ng-view. Upon subsequent clicks, since the current URL is #/example/ and does not match the linked URL (href="#/example"), Angular triggers a location change, reloading the ng-view. Furthermore, Angular redirects the URL back to #/example/. This behavior repeats each time the link is clicked, meeting my desired outcome.

I hope this solution proves helpful for you as well!

To make the page reload, you can include _target='_self' in the link tag.

For example:

<a href="/Customer/Edit/{{customer.id}}" target="_self">{{customer.Name}}</a>

This method has been tested with versions 1.0.5 and 1.2.15 on IE and Firefox.

For more information, visit AngularJS site.

HTML Link Rewriting

When using HTML5 history API mode, different browsers may require varied links. However, specifying regular URL links simplifies this process:

<a href="/some?foo=bar">link</a>

Upon clicking such a link,

• In older browsers, the URL transforms to /index.html#!/some?foo=bar
• In modern browsers, the URL remains as /some?foo=bar

In specific scenarios, links are not rewritten, and a full page reload occurs instead:

• Links containing the target element Example:

  <a href="/ext/link?a=b" target="_self">link</a>

• Absolute links pointing to a different domain Example:

  <a href="http://angularjs.org/">link</a>

• Links commencing with '/' that direct to a distinct base path when a base is defined Example:

  <a href="/not-my-base/link">link</a>

If you're working with AngularUI Router, you can implement it using the following code snippet:

<a data-ui-sref="some.state" data-ui-sref-opts="{reload: true}">State</a>

Make sure to pay attention to the 'reload' option.

I discovered this solution on Stack Overflow:

As per the response provided by @Renan Tomal Fernandes, here is a sample implementation:

HTML

<a href="#/something" my-refresh></a>

JS

angular.module("myModule",[]).
directive('myRefresh',function($location,$route){
    return function(scope, element, attrs) {
        element.bind('click',function(){
            if(element[0] && element[0].href && element[0].href === $location.absUrl()){
                $route.reload();
            }
        });
    }   
});

I believe taking a more straightforward approach is the way to go.

.directive ('a', function ($route, $location) {
    var d = {};
    d.restrict = 'E';
    d.link = function (scope, elem, attrs) {

        // has target
        if ('target' in attrs) return;

        // doesn't have href
        if (!('href' in attrs)) return;

        // href is not the current path
        var href = elem [0].href;
        elem.bind ('click', function () {
            if (href !== $location.absUrl ()) return;
            $route.reload ();
        });
    };
    return d;
});

If you want all basic <a> links (without the target attribute) to reload when clicked and you use relative links in the href attribute (e.g. /home instead of http://example.com/home), there's no need to add any special markup to your HTML. This is especially useful when updating a site with existing HTML content already in place.

In my situation, none of the usual methods were effective when the URL remained the same. This included using $route.reload(), $location.path(), $state.transitonTo(), and more.

My solution involved creating a Dummy Page in the following manner:

if( oldLocation === newLocation ) {
   // None of the previous solutions worked
   // window.location.reload(); - refreshes the entire page
   // $route.reload();
   // $state.go($state.$current, null, { reload: true });
   // $state.transitionTo($state.current, $stateParams, {reload:true, inherit: false, notify: false } );
   // The only effective method was:
   $location.path('/dummy'); 
   $location.path($location.path());
   $scope.$apply(); 
}

You must create a '/dummy' module somewhere, which serves no purpose other than changing the URL so that the next $location.path() can take effect. Remember to include $scope.$apply()

Just a little while ago, I came across an issue similar to this one, but it involved the home page '/'. To keep things simple and avoid writing too much code, I decided to make use of the .otherwise method in the $routProvider.

Here's how the HTML link would look:

<a href="#/home">Home</a>

By not specifying a '/home' page in the routProvider, any requests for that page will automatically redirect to the '/' page thanks to the 'otherwise' method set up like this:

.otherwise({
redirectTo: '/'
});

I hope this solution proves helpful to someone else facing a similar dilemma.

I attempted to implement Wittaya's solution using the directive approach mentioned above. Unfortunately, I encountered errors with the directive. As a result, I came up with an alternative solution.

Here is the code snippet for the HTML:

<a href="javascript:void(0)" data-ng-click="stateGo('devices')">Devices</a>

And here is the snippet for the controller:

    $scope.stateGo = function (stateName) {
        if ($state.$current.name === stateName) {
            $state.reload();
        } else {
            $state.go(stateName);
        }
    }