angular breadcrumb

breadcrumb_angular.html

<div class="navbar" ng-controller="HeaderCtrl">
    <div class="navbar-inner">
        <a class="brand" ng-click="home()">AScrum</a>
        <ul class="nav">
            <li ng-class="{active:isNavbarActive('projectsinfo')}"><a href="/projectsinfo">Current Projects</a></li>
        </ul>

        <ul class="nav" ng-show="isAuthenticated()">
            <li ng-class="{active:isNavbarActive('projects')}"><a href="/projects">My Projects</a></li>
            <li class="dropdown" ng-class="{active:isNavbarActive('admin'), open:isAdminOpen}" ng-show="isAdmin()">
                <a id="adminmenu" role="button" class="dropdown-toggle" ng-click="isAdminOpen=!isAdminOpen">Admin<b class="caret"></b></a>
                <ul class="dropdown-menu" role="menu" aria-labelledby="adminmenu">
                    <li><a tabindex="-1" href="/admin/projects" ng-click="isAdminOpen=false">Manage Projects</a></li>
                    <li><a tabindex="-1" href="/admin/users" ng-click="isAdminOpen=false">Manage Users</a></li>
                </ul>
            </li>
        </ul>
        <ul class="nav pull-right" ng-show="hasPendingRequests()">
            <li class="divider-vertical"></li>
            <li><a href="#"><img src="/static/img/spinner.gif"></a></li>
        </ul>
        <login-toolbar></login-toolbar>
    </div>
    <div>
        <ul class="breadcrumb">
            <li ng-repeat="breadcrumb in breadcrumbs.getAll()">
                <span class="divider">/</span>
                <ng-switch on="$last">
                    <span ng-switch-when="true">{{breadcrumb.name}}</span>
                    <span ng-switch-default><a href="{{breadcrumb.path}}">{{breadcrumb.name}}</a></span>
                </ng-switch>
            </li>
        </ul>
    </div>
</div>

service.js

angular.module('services.breadcrumbs', []);
angular.module('services.breadcrumbs').factory('breadcrumbs', ['$rootScope', '$location', function($rootScope, $location){

  var breadcrumbs = [];
  var breadcrumbsService = {};

  //we want to update breadcrumbs only when a route is actually changed
  //as $location.path() will get updated imediatelly (even if route change fails!)
  $rootScope.$on('$routeChangeSuccess', function(event, current){

    var pathElements = $location.path().split('/'), result = [], i;
    var breadcrumbPath = function (index) {
      return '/' + (pathElements.slice(0, index + 1)).join('/');
    };

    pathElements.shift();
    for (i=0; i<pathElements.length; i++) {
      result.push({name: pathElements[i], path: breadcrumbPath(i)});
    }

    breadcrumbs = result;
  });

  breadcrumbsService.getAll = function() {
    return breadcrumbs;
  };

  breadcrumbsService.getFirst = function() {
    return breadcrumbs[0] || {};
  };

  return breadcrumbsService;
}]);