title: anchor href linking with angular routes
body: <p>I use angular routing between multiple views and try to populate a common breadcrumb list on each route change. This works fine except that the hyperlinks in the breadcrumb don't work.</p>
  
  <p>Essentially I have a site with the following views:</p>
  
  <p>views/main.html</p>
  
  <p>views/page_a.html</p>
  
  <p>views/page_b.html</p>
  
  <p><strong>and structure:</strong></p>
  
  <p>main > page a > page b</p>
  
  <pre><code>$rootScope.$on('$routeChangeSuccess', function(scope, next, current) {  
  
      var thisView = next.loadedTemplateUrl;
      if (!thisView) return;
      var breadcrumb = jQuery('#breadCrumb'); //&lt;ol&gt; container
      breadcrumb.empty();
  
      if (thisView.indexOf('page_a') &gt;= 0) {
        breadcrumb.append('&lt;li&gt;&lt;a href="#/main"&gt;main&lt;/a&gt;&lt;/li&gt;');    
        breadcrumb.append('&lt;li class="active"&gt;page a&lt;/li&gt;'); 
      }
      else if (thisView.indexOf('page_b') &gt; 0) {
        breadcrumb.append('&lt;li&gt;&lt;a href="#/main"&gt;main&lt;/a&gt;&lt;/li&gt;');    
        breadcrumb.append('&lt;li&gt;&lt;a href="#/page_a"&gt;page a&lt;/a&gt;&lt;/li&gt;');
        breadcrumb.append('&lt;li class="active"&gt;page b&lt;/li&gt;'); 
      }
    });
  </code></pre>
  
  <p>unfortunately those hyperlinks doesn't go to the right place. I think I have tried all combinations of e.g. #/page_a, #/page_a.html, /views/page_a.html, ... but no luck. Feel this shouldn't be hard but it's getting late so I hope for some help.
  Thanks!</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>My routes are set up like:</p>
  
  <pre><code>app.config(function ($routeProvider) {
    $routeProvider
    .when('/', {
      templateUrl: 'views/main.html',
      controller: 'MainCtrl'
    })
    .when('/page_a', {
      templateUrl: 'views/page_a.html'
    })
    .when('/page_b', {
      templateUrl: 'views/page_b.html'
    })
    .otherwise({
      redirectTo: '/'
    });
  });
  </code></pre>