Angularjs routes conflicting with MVC 5 routing

Question

I am developing a mini SPA, using angular, inside my ASP.Net MVC 5 application. Basically I want to use this mini SPA for onboarding/registration workflow, and use ASP.Net MVC views and routes for other functionality.

For Onboarding mini SPA I have defined an MVC route:

routes.MapRoute(
           name: "Onboarding",
           url: "onboarding/{*catchall}",
           defaults: new { controller = "Onboarding", action = "Create" }
       );

The Angular configuration looks like:

(function () {
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider, $locationProvider) {

    $routeProvider.caseInsensitiveMatch = true;
    $routeProvider.when('/onboarding', { templateUrl: '/app/Views/CreateShop.html', controller: 'onboardingController' })
        .when('/onboarding/add-product', { templateUrl: '/app/Views/AddProduct.html', controller: 'onboardingController' })

    $locationProvider.html5Mode(true);
});}());

The Create.chtml uses acts as a container/entry point for this mini SPA.

    <div ng-controller="onboardingController">
    <div ng-view></div>
</div>
@section scripts {
    @Scripts.Render("~/bundles/angularOnboarding")
}

PROBLEM: When I am inside the mini SPA my navigation links/routes break e.g. navigation to contact page or about page (MVC Views) doesn't work. Angular seems to handling all routing requests. Also, navigation from an anchor tag which navigates to some MVC route doesn't work. Putting the url in the browser works. How do I make this work for my hybrid scenario? Would really appreciate any suggestions or solution, Thanks.