angularJS href route conflict

Question

Hello I have a common navigation bar for all my mvc pages. This is an MVC 4.0 app.

this is the model of breadcrumbs nav:

<div id="nav">
    <ul class="brdcm">
        @{ 
            Sample.Models.BreadCrumbsCollection cln = ViewBag.BreadCrumbs;
            if (cln != null)
            {
                for (int i = 0; i < cln.Count; i++)
                {
                    if (i == 0)
                    {
            <li class="last"><a href='@cln[i].Url'>@cln[i].Text</a></li>
                    }
                    else
                    {
            <li><a href='@cln[i].Url'>@cln[i].Text</a></li>
                    }
                }
            <li class="first">
                <img src='@cln.IconUrl' /></li>
            }}
    </ul>
</div>

in the view file the breadcrumbs its built like this:

@using sample.Models.Quotas;
@{   
    ViewBag.Title = "Construction Quote";
    Layout = "~/Views/Shared/_Layout.cshtml";
    Sample.Models.BreadCrumbsCollection cln = new Sample.Models.BreadCrumbsCollection();
    cln.Add(new Sample.Models.BredCrumb() { Text = "Construction Quote", Url = "/quote/"});

    //cln.Add(new Sample.Models.BredCrumb() { Text = "Construction Quote", Url = "/quote/" + q.QuoteId.ToString() });
    cln.Add(new Sample.Models.BredCrumb() { Text = "Quotes", Url = "/quotes" });
    cln.Add(new Sample.Models.BredCrumb() { Text = "Home", Url = "/" });
    cln.IconUrl = "/Images/msg_icon.png";
    ViewBag.BreadCrumbs = cln;
}

cs.app.js file looks like this:

var appModule = angular.module('SampleApp', ['ngResource', 'ngRoute', 'ngSanitize', 'ngCookies', 'ui.utils']);

appModule.config(function ($routeProvider, $locationProvider) {
    $routeProvider.when('/Quote/:quoteId', { controller: ConstructionQuoteController });
    $locationProvider.html5Mode(true);
});

The issue I have is that all href links inside the app page work but have to be done through ng-click and added as a $scope in the script

href witten like this works:

<a href="" ng-click="gotoSummary()">Summary</a>

but this doesn't work:

cln.Add(new Sample.Models.BredCrumb() { Text = "Home", Url = "/" });

what this does is that all my main nav and footer links dont work as they are build with normal a href =

how can I change the model to use ng click when the div calls for the controller and still make it work for all other normal href links?

thank you for all your help

Answer 1

For Angular use # in links (please see here http://plnkr.co/edit/55jSlti81Xggk6tue1HW?p=preview )

 <a href="#/products/">Angular Product Link</a>

For 'Non Angular' use normal links

  <a href="/products/">Non Angular Product Link</a>