AngularJS routing with html5mode

Good Day,

I am working on an ASP.NET MVC project with Angular and my website was working with ng-routing.


My HTML looks like:

<li class="qp">
    <a href="#">Notifications</a>

<li class="qp">
    <a href="#!/paybalancedue">Make Payment</a>

    .when('/', {
        // This is for reditect to another route
        redirectTo: function() {
            return '/home';
    .when("/home", {
        templateUrl: "/Html/NotificationsTransactions.html",
        controller: 'DashboardController'
    .when("/paybalancedue", {
        templateUrl: '/Html/PayBalanceDue.html',
        controller: 'PayBalanceDueController'

This was working but by setting html5Mode to false, I inadvertantly broke my site because I need to be able to use the $location service to get querystring parameters.

So I set html5Mode(true) and added tag to the home page. And my setting to:


and this doesn't work

I opened up angular.js to get the version of Angular and it is 1.4.6. I also opened up angular-route.js and it is also 1.4.6. I know that as of 1.6 Google made a change to use '#!'.

When I login to my website, the only route that works properly is "/", which goes where it's supposed to go. But I can't get to the paybalancedue page.

When I attempt to go to paybalancedue, my url changes to:

Further research indicates that %2F is caused by the hashbang changing in Angularjs 1.6. I'm not sure how that can be if I'm have 1.4.6.

Can someone else point me in the right direction?