How to correctly load javascript across pages when using the $routeProvider in Angular1

Question

Currently, I make use of Angular's $routeProvider and $locationProvider to browse an SPA. It's unclear to me how to implement javascript across pages using a controller. As soon as I switch pages the javascript controller doesn't get executed. I have posted an example below. My script is called from mainScript.js

app.config(['$routeProvider', '$locationProvider', function ($routeProvider, 
$locationProvider) {
    $locationProvider.html5Mode(true);
    $routeProvider.when("/", {
            templateUrl: "partials/home.html"
            , controller: "PageCtrl"
        })
        // Pages
        .when("/pricing", {
            templateUrl: "partials/pricing.html"
            , controller: "PageCtrl"
        })
        .otherwise("/404", {
            templateUrl: "partials/404.html"
            , controller: "PageCtrl"
        });
  }]);

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

 $scope.menuCtrl = function(){
        //execute code across pages
    }
    $scope.menuCtrl();

});
}());

Answer 1

you can using oclazyload .first inject oc.lazyload in your app then :

 app.config(['$routeProvider', '$locationProvider', function ($routeProvider, 
    $locationProvider) {
        $locationProvider.html5Mode(true);
        $routeProvider.when("/", {
                templateUrl: "partials/home.html"
                , controller: "PageCtrl",
                  resolve:{
                loadFiles: [
                            "$ocLazyLoad", function ($ocLazyLoad) {
                                return $ocLazyLoad.load([
                                    "mainScript.js",

                                ]);
                            }
                        ]
                      }
            })