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: '/'

  });

});