Problems updating UI during execution of CPU intensive javascript

I am working on a web app using AngularJS. My controller performs some CPU intensive tasks on data retrieved using AJAX, and it does this several times for a single view. The problem is that the controller tends to freeze the UI, including the spinner I display, until everything is completed.

I am aware of the trick of using setTimeout or $timeout in AngularJS to allow the UI to catch up but it doesn't seem to work well when the CPU is maxed out. I am sure the problem isn't with AngularJS implementation since I have tried doing similar things with jQuery and plain old Javascript.

I have a contrived JSFiddle to demonstrate the sort of problems I am having

http://jsfiddle.net/kgzsd/

function MyCtrl($q, $timeout, $scope, $http) {
    var doSomething = function (i) {
        var def = $q.defer();
        doSomethingElse(i).then(function (y) {
            for(var m = 0; m < 500; m++) {
                $timeout(function () {
                    for(var n = 0; n < 1000000; n++) {
                        var o = 500000000 + n + m * 1000000;
                        var p = o * o * o;
                    }
                }, 20);
            }
            def.resolve(y);
        });
        return def.promise;
    }
    var doSomethingElse = function (i) {
        var def = $q.defer();
        $http.post('/echo/html/', $.param({
            html: "Task #" + i + " complete.",
            delay: 5 - i
        })).then(function (x) {
            def.resolve(x.data);
        });
        return def.promise;
    }
    $scope.results = [];
    for(var i = 1; i <= 5; i++) {
        doSomething(i).then(function (z) {
            $scope.results.push(z);
        });
    }
}

Hopefully someone can tell me a better way to do this.