Sitemap bound Menu and Client Side Routing

I have a sitemap bound kendo menu in my layout page that correctly displays the menu items in the ul as shown below. Although this works great for an mvc app with normal back end routing it doesnt work for client side routing such as the one provided by angular or others. Because im trying to build a spa I need the href to be #/controller/action. Is there any way to do this.  

 Server wrapper:

 @(Html.Kendo().Menu()
                             .Name("SiteNav")
                             .Direction(MenuDirection.Bottom)
                             .SecurityTrimming(true)
                             .BindTo("WebSiteMap", (item, siteMapNode) => { })
                            )

Generated html:

<ul class="k-widget k-reset k-header k-menu" id="SiteNav">
    <li class="k-item k-state-highlight k-state-default"><a class="k-link" href="/">Home<span class="k-icon k-i-arrow-s"></span></a><ul class="k-group k-menu-group">
        <li class="k-item k-state-default"><a class="k-link" href="/Home/Contact">Contact</a></li>
    </ul>
    </li>
    <li class="k-item k-state-highlight k-state-default"><a class="k-link" href="/">Home 2</a></li>
</ul>

sitemap:

<?xml version="1.0" encoding="utf-8" ?>
<siteMap>
  <siteMapNode title="" description="" roles="*">
    <siteMapNode title="Home" controller="Home" action="Index">
      <siteMapNode title="Contact" controller="Home" action="Contact" />
      <siteMapNode title="About" controller="Home" action="About"  roles="Admin"/>
    </siteMapNode>
    <siteMapNode title="Home 2" controller="Home" action="Index">
    </siteMapNode>
  </siteMapNode>

</siteMap>