Having trouble using AngularJS routing on a .NET MVC website when not using root url. (Internet Explorer only)

I was having a lot of trouble getting Angular routing to work when the url was not the root of the webserver.
i.e. http://localhost/MyWebsite/ instead of http://localhost/

I messed around with all the routing configs and eventually got this:

angular.module('myApp', ['myApp.ctrl.home','ngRoute'])
.config(['$routeProvider', '$locationProvider', function ($routeProvider,   $locationProvider) {

    // Specify the three simple routes ('/', '/About', and '/Contact')
    $routeProvider.when('/', {
        templateUrl: '/MyWebsite/Home/Home',
        controller: 'homeCtrl',
    });
    $routeProvider.when('/About/', {
        templateUrl: '/MyWebsite/Home/About',
        controller: 'aboutCtrl',
    });
    $routeProvider.otherwise({
        redirectTo: '/squiffy'
    });
    $locationProvider.html5Mode(false).hashPrefix('!');
}]);

and adding < base href="/MyWebsite/" /> to my html head element. So the url's now form correctly (http://localhost/MyWebsite/#!/About )

And now it all works in chrome! Excellent, go me!
But it doesn't work in IE.

The developer console gives me the error:

 Error: [$compile:tpload] Failed to load template: /Home/About (HTTP status: 404 Not Found)  

So it appears it is looking for /Home/About instead of /MyWebsite/Home/About

Ideally I don't want to have to hardcode the /MyWebsite/... to the template url's.
But mainly i just want to get something working across all (most) browsers.

It's an .NET MVC 5 web site, i can give you any code from the controllers or route config if needed but it's all pretty much as basic as you can get.
1 controlelr with 1 ActionResult returning a PartialView for each page, 1 cshtml page with some html filler text, routeconfig is default..

(NB, it works in all browsers when i use the root website, remove the tag and remvoe the /MyWebsite/ from the templateUrl's.)

So any idea where I am going wrong?