AngularJS full page refresh on the page I am visting, not the current one

Question

I am using maphilight on my main page but if i route to a different partial and then return to that main page, maphilight stops working. However, if I then refresh the page, it works again. how do i force that main page to refresh every time I navigate back to it? I have seen people able to refresh the current page with

$scope.reloadPage = function(){window.location.reload();}

and

<a ng-click="reloadPage()" href="index.html#/diagram">Back to search</a>

but I cant get this to refresh the page I am navigating to. thanks in advance

here is the controller for the page I am linking to and want to refresh:

roomControllers.controller('DiagramController', ['$scope', '$route',  '$http', function($scope, $route, $http) {
$http.get('js/master.json').success(function(data) {
   $scope.rooms = data;
   $scope.reloadPage = function(){window.location.reload();}
});
}]);

here is link in the page that I am coming from

<a ng-click="reloadPage()" href="index.html#/diagram">&laquo; Back to search</a>

and here is the app code

var myApp = angular.module('myApp', [
 'ngRoute',
 'roomControllers'
]);

myApp.config(['$routeProvider', function($routeProvider) {
  $routeProvider.
  when('/diagram', {
    templateUrl: 'partials/diagram.html',
    controller: 'DiagramController'
  }).
  when('/diagram/:roomId', {
    templateUrl: 'partials/room-details.html',
    controller: 'RoomDetailsController'
  }).
  otherwise({
    redirectTo: '/diagram'
  });
}]);

myApp.directive('highlight', function() {
    return {
        restrict: 'A',
        link: $(function(scope, element, attrs) {
          $('img[usemap]').maphilight();
     })};

});

and finally the html for the imagemap being highlighted:

<div class="info">
  <img ng-src="images/housediagram.jpg" alt="Photo of thing" class="map" usemap="#houseMap" highlight>

  <map name="houseMap" id="map">
    <area ng-repeat="room in rooms" name="{{room.name}}" id="{{room.id}}" shape="poly" coords="{{room.coords}}" href="#/diagram/{{room.id}}" />
  </map>
</div>

Answer 1

Try this, If you are looking for a full refresh of the page.

 myApp.controller('DiagramController', ['$scope', '$route', 
                       '$http', '$window', function($scope, $route, $http, $window) {
    $http.get('js/master.json').success(function(data) {
       $scope.rooms = data;
       $scope.reloadPage = function(){
          $window.location.reload();         
        }
    });
    }]);

Answer 2

I don't think you should be trying to reload the whole page - that's a sign that you're not achieving what you want to within the Angular system. What I'm saying is that you shouldn't be forcing pages to reload just to get a script to run. Do something like this:

HTML:

<div data-ng-controller="yourContoller" data-ng-init="load();"></div>

JS:

.when('/example', {
        templateUrl : 'pages/example.html',
        controller  : 'yourController',
    })

app.controller('yourController', function($scope) {

$scope.load = function() { //PUT YOUR SCRIPTS HERE }

}

This way, the scripts will run every time the page loads, including the first time (and any subsequent time).

You could also use your existing directives in ng-onload's.