Angularjs routing not working with ASP.NET MVC

Question

Whenever I click link to the partial view (I expect it to be displayed on the same page inside div tagged with 'ng-view'), partial view is opened in the new page.

Here is my Index page (its rendered inside layout page).

<div ng-app="ProductsModule">
    <div>
        <div>
          <a href="addproductpartial" target="_self"> Add Product </a>
        </div>     
    <div>
      <div ng-view></div>
    </div>
</div>

Here is my angularjs routing script

angular.module("ProductsModule", ['ngRoute', 'ngAnimate', 'ui.bootstrap'])
    .config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    $routeProvider.when('/addproductpartial',
        {
            templateUrl: 'Home/AddProductPartial',
            controller: 'AddProductsController'
            });

    $locationProvider.html5Mode({
        enabled: true,
        requireBase: false
    });
}]);

And the MVC controller

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult AddProductPartial()
    {
        return PartialView("AddProductPartial");
    }
}

EDIT 1

Its working, but only for MVC Controller name. For instance, .when('/Home'... works, but .when('/Home/Index' ... or .when('/Index' ... doesn't.

Answer 1

change the link to:

<a href="#!addproductpartial" target="_self"> Add Product </a>

(add '#!' at the begining of the 'href')