Page not scrollable with ng-include="function()" - The code is not in use anymore

Question

Important Edit

The problem doesn't occur with an ng-hide we removed that code for a bootstrap collapse, but it still occurs. My next guess is the following piece of code

<div ng-include="getTemplateUrl()"></div>

This is the whole directive:

stuffModule.directive('stuffDirective', function ($compile) {
    var oldId = undefined;
    return {
        restrict: 'E',
        scope: {
            model: '='
        },
        link: function (scope, elem, attrs) {
            scope.$watch(function (scope) {
                if (oldId !== scope.model.key) {
                    oldId = scope.model.key;
                    return true;
                }
                return false;
            }, function (newValue, oldValue) {
                if (scope.model.someswitch) {
                    switch (scope.model.someswitch) {
                        case 'condition1':
                            scope.getTemplateUrl = function () {
                                return 'condition1.html';
                            }
                            break;
                        case 'condition2':
                        case 'condition3':
                            scope.getTemplateUrl = function () {
                                return 'condition23.html';
                            }
                            break;
                        default:
                            break;
                    }
                } else {
                    scope.getTemplateUrl = function () {
                        return 'default.html';
                    }
                }
            });
        },
        template: '<div ng-include="getTemplateUrl()"></div>'
    };
});

Just a short clarification, it is literally not possible to scroll with the mouse, but you can easily tab through the fields.

PS: It only happens in Internet Explorer 11, that is the version our customer is using. In Firefox I don't have that problem.

We replaced the code

Because there is an important presentation tomorrow and a missing scrollbar is something like a really big issue, we decided to remove the piece of code and replace it with just normal routing.

Thanks to all commentors :)

Original question with ng-hide

I have a simple page, where I hide a part with ng-hide. When ng-hide turns false the part gets shown, but randomly the page is not scrollable until I reload the whole page.

If it helps, the data which turn ng-hide to false come from an AJAX request.

EDIT 1 - not relevent anymore

Here is the code which does the HTTP requests

this.getCall = function (url) {
    var dfd = $q.defer();
    $rootScope.loading = true;
    $rootScope.loadingError = false;
    $rootScope.progressActive = true;
    $rootScope.loadingClass = "progress-bar-info";
    $http.get('http://localhost/something', {
        cache: true
    }).success(function (data) {
        $rootScope.loadingClass = "progress-bar-success";
        $rootScope.progressActive = false;
        $timeout(function () {
            $rootScope.loading = false;
        }, 500);
        dfd.resolve(data);
    }).error(function (data, status, headers) {
        $rootScope.loading = false;
        $rootScope.loadingError = true;
        $rootScope.progressActive = false;
        $rootScope.loadingClass = "progress-bar-danger";
        console.error(data);
        dfd.reject(JSON.stringify(data));
    });
    return dfd.promise;
};

The properties on $routescope are there to show a simple progress bar for every HTTP request.

Answer 1

Many things are weird in your code. $scope.watch callback will be executed when the first function will return a result that is different than the last time it was executed. You will certainly not obtain the expected behavior with what you have: instead simply watch for model.key

Another problem is the way you redefine getTemplateUrl: you should not redefine a function, but change what it returns, as pinted out by @New Dev in a comment.

Fixed directive:

link: function (scope, elem, attrs) {

    // Or simply bind templateUrl in your ng-include
    scope.getTemplateUrl = function() {
      return scope.templateUrl;
    }

    scope.$watch('model.key', function (newValue) {
        if (scope.model.someswitch) {
            switch (scope.model.someswitch) {
                case 'condition1':
                    scope.templateUrl = 'condition1.html';
                    break;
                case 'condition2':
                case 'condition3':
                    scope.templateUrl = 'condition23.html';
                    break;
                default:
                    break;
            }
        } else {
            scope.templateUrl = 'default.html';
        }
    });

}

Now your scrolling issue has probably nothing to do with that. If the template is right but the scrolling wrong, you should investigate as to what is causing that specific issue. For us to help, we need a way to reproduce or understand the issue.