AngularJS - ui-router - MVC 5 - html5mode

I am trying to create a mini SPA with AngularJS and MVC 5. In addition to that, I want to use ui-router plugin for AngularJS instead of ng-route and want to enable html5mode.

My problem is, whenever I click on an anchor element, it refreshes the page and sends request to ASP.NET MVC controller and puts the selected view in the right place, I want it not to reload.

If I change AngularJS routing mechanism to ng-route, then it works as I wanted, does not refreshes the page, and routes to the selected view.

In MVC 5 RouteConfig.cs file,

        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        routes.MapRoute(
            name: "SpaUI",
            url: "{SpaUI}/{*catchall}",
            defaults: new { controller = "SpaUI", action = "Index", id = UrlParameter.Optional }
        );

        routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "SpaUI", action = "Index", id = UrlParameter.Optional }
        );

In app.js file for AngularJS,

app.config(['$stateProvider', '$provide', '$locationProvider', '$urlRouterProvider', function ($stateProvider, $provide, $locationProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/Dashboard');

    $stateProvider
    .state("dashboard", {
        url: "/Dashboard",
        templateUrl: "AngularViews/dashboard.html"
    })

    .state("test", {
        url: "/Test",
        templateUrl: "AngularViews/test.html"
    });

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

In _Layout.cshtml file for anchors;

 <a data-ui-sref="dashboard" title="Dashboard">

In same _Layout.cshtml file for view placeholder

 <div id="content" data-ui-view="" class="view-animate"></div>

How can I make all of these things play together without reloading the page? Any ideas are appreciated :)