anchor href linking with angular routes

Question

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.

Essentially I have a site with the following views:

views/main.html

views/page_a.html

views/page_b.html

and structure:

main > page a > page b

$rootScope.$on('$routeChangeSuccess', function(scope, next, current) {  

    var thisView = next.loadedTemplateUrl;
    if (!thisView) return;
    var breadcrumb = jQuery('#breadCrumb'); //<ol> container
    breadcrumb.empty();

    if (thisView.indexOf('page_a') >= 0) {
      breadcrumb.append('<li><a href="#/main">main</a></li>');    
      breadcrumb.append('<li class="active">page a</li>'); 
    }
    else if (thisView.indexOf('page_b') > 0) {
      breadcrumb.append('<li><a href="#/main">main</a></li>');    
      breadcrumb.append('<li><a href="#/page_a">page a</a></li>');
      breadcrumb.append('<li class="active">page b</li>'); 
    }
  });

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!

EDIT

My routes are set up like:

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: '/'
  });
});

Pineal

how are your routes set up? views are not routes – Jackfish

#/main is a route that doesn't exists when configuring your routes. Either change your link to "#/" or your route to "#/main" – Zimbabwe

Answer 1

ok, a very stupid mistake and I wouldn't have needed to post this question at all.. Indeed href="#/page_a". It works just fine so this was just as easy as expected.

Pineal