AngularJS: Controller loads only after page refresh

Question

I am using AngularJS with ASP.NET MVC to create an application which uses Angular controllers for the front end. When I run the application on my development system, it works fine. When I deploy it on my local IIS, it works fine. BUT, when I deploy it the to production server IIS, the angular controller does not load and it requires refreshing the page to get it to work.

I have looked at the similar questions, for instance: Angular app only loads on page refresh

I also do not have any other extensions or plugins installed to affect the behavior as suggested in other similar questions.

I have moved all the JS in bundles, but that also to no avail. The order of the JS also seems to be correct because it works perfectly well on the development system, and local IIS.

I have no other idea on how to proceed with this issue.

Here's the screenshot for the error in the console:

And here's the code:

For HomeController,

app.controller('homeController', function ($scope, $uibModal, HomeService, RequestService) {
    $scope.refreshOriginatorForms = function (searchCriteria) {
        HomeService.getOriginatorRequestForms(searchCriteria).then(function (response) {
           ....
        });
    }
    var originatorSearchCriteria = {
        Pager: {
            ItemsPerPage: 10,
            CurrentPage: 1
        }
    };
    $scope.OriginatorFormsSearchCriteria = originatorSearchCriteria;
    $scope.initialize = function () {
        $scope.refreshOriginatorForms($scope.OriginatorFormsSearchCriteria);
    };
}

The $scope.initialize method is called in the view with ng-init="initialize()"

Answer 1

I have moved all the JS in bundles

If you are minimizing angular controllers then you should write our controller like this to that minimizers does not rename important angular keywords like $scope

app.controller('homeController',['$scope','$uibModal','HomeService','RequestService', function ($scope, $uibModal, HomeService, RequestService) {
$scope.refreshOriginatorForms = function (searchCriteria) {
    HomeService.getOriginatorRequestForms(searchCriteria).then(function (response) {
       ....
    });
}
var originatorSearchCriteria = {
    Pager: {
        ItemsPerPage: 10,
        CurrentPage: 1
    }
};
$scope.OriginatorFormsSearchCriteria = originatorSearchCriteria;
$scope.initialize = function () {
    $scope.refreshOriginatorForms($scope.OriginatorFormsSearchCriteria);
};
}])

Answer 2

We finally got it solved. Our network engineer suggested enabling the CDN on the DNS, and it worked. All this time, looking at the code, and the issue was something else.