AngularJS - IE8 IE9 never gets the updateRoute method called

Question

Developing an application and tried with the latest stable and unstable version of angularJS The application loads fine on all browser minus IE 9 and IE8 (and maybe lower)

Trying to debug it it looks like the $locationChangeSuccess broadcast is never received by the object listening for it $rootScope.$on('$locationChangeSuccess', updateRoute); and thus never calls the updateRoute method. The function afterLocationChange is called though. I haven't been able to debug thanks to the sucky IE10 running in IE8debugger (doesn't break on breakpoints I set in angularJS), so used console.log outputs.

I am bootstraping manually and I have a specific way of routing, not using ng-views but ng-include / ng-switch and adding to the routes an action property which will then be evaluated by the main controller and injected into the scope which the views are using for the ng-switch. I don't know if it's related to the way I am routing things, as it really appears that the updateRoute is never called, but I here is the code anyways, in case I am wrong.

The route definition function (LOGIN)

{
    LOGIN.config
    (
        [
            '$routeProvider', '$locationProvider', '$dialogProvider',
            function ($routeProvider, $locationProvider, $dialogProvider)
            {
                $locationProvider.html5Mode(true).hashPrefix = '!';

                $routeProvider
                    .when("/", { action: "login" })
                    .when("/forgot_password/", { action: "forgot_password" });
            }
        ]
    );
}

The application controller

function (LOGIN)
{
    LOGIN.controller(
        'controllerApplication',
        [
            '$scope', '$route',
            function ($scope, $route) {
                var self = this;

                // Update the rendering of the page.
                this.render = function ()
                {
                    // Pull the "action" value out of the currently selected route.
                    var renderAction = $route.current.action;

                    // Also, let's update the render path so that we can start conditionally rendering parts of the page.
                    var renderPath = renderAction.split(".");

                    // Reset the boolean used to set the css class for the navigation.
                    var inLogin     = (renderPath[0] === "login");
                    var inPassword  = (renderPath[0] === "forgot_password");

                    // Store the values in the model.
                    $scope.renderAction = renderAction;
                    $scope.renderPath   = renderPath;
                    $scope.inLogin      = inLogin;
                    $scope.inPassword   = inPassword;
                    $scope.loaded       = false;
                };

                // Listen for changes to the Route.
                // When the route changes, let's set the renderAction model value
                // so that it can render in the Strong element.
                $scope.$on
                (
                    "$routeChangeSuccess",
                    function ($currentRoute, $previousRoute)
                    {
                        // Update the rendering.
                        self.render();
                    }
                );
            }
        ]
    );
}

And in my partial

<div id="main-container" ng-switch on="renderPath[0]">
    <div ng-switch-when="login" ng-include=" 'js/app/login/partials/login.html' "></div>
    <div ng-switch-when="forgot_password" ng-include=" 'js/app/login/partials/forgot-password.html' "></div>
</div>

I have log a bug here https://github.com/angular/angular.js/issues/2608

But it seems odd that nobody has this problem, so I would love to have some input from people.

I am yet to see an app working in IE8.
If you have any links I will be keen to check it out. Cheers.

Answer 1

I feel so ashamed... :)

After spending an hour debugging and finding out that angular was not finding the ng-controller directive for IE I realized that I forgot to include the same controller in the IE specific html directive...

<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en" ng-controller="controllerApplication"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en" ng-controller="controllerApplication"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en" ng-controller="controllerApplication"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js" lang="en" ng-controller="controllerApplication"> <![endif]-->