breadcrumbs gist

var myApp = angular.module('app',[]);

myApp.directive('breadcrumbs', function ($state) {
          return {
              restrict: 'EA',
              templateUrl: 'index.html',
              link: function (scope) {
                  
                  scope.breadcrumbs = [];
                  if ($state.$current.name !== '') {
                      updateBreadcrumbsArray();
                  }
                  scope.$on('$stateChangeSuccess', function () {
                      updateBreadcrumbsArray();
                  });

                  /**
                   * Start with the current state and traverse up the path to build the
                   * array of breadcrumbs that can be used in an ng-repeat in the template.
                   */
                  function updateBreadcrumbsArray() {
                      
                      var breadcrumbs = [];
                      var currentState = $state.$current;

                     

                      while (currentState && currentState.name !== '') {

                          if (currentState.breadcrumb) {

                              var displayName = getDisplayName(currentState);
                              var route = getRoute(currentState);
                              if (displayName !== false) {
                                  breadcrumbs.push({
                                      displayName: displayName,
                                      route: route
                                  });
                              }
                          }
                          
                          currentState = currentState.parent;
                      }

                      breadcrumbs.reverse();
                      scope.breadcrumbs = breadcrumbs;
                  }


                  function getRoute(currentState) {

                      if (!currentState.breadcrumb.state) {
                          return currentState.name;
                      }

                      return currentState.breadcrumb.state;
                  }

                  /**
                   * Resolve the displayName of the specified state. Take the property specified by the `displayname-property`
                   * attribute and look up the corresponding property on the state's config object. If the string found begins with
                   * a colon eg `:username`, that signifies that the displayName should be provided by the result of the named `resolve` property.
                   * @param currentState
                   * @returns {*}
                   */
                  function getDisplayName(currentState) {

                      var resolveProperty;
                      var displayName;

                      if (currentState.breadcrumb.title.indexOf(':') === 0) {
                          // the : syntax indicates a reference to a resolved property, so use that instead
                          resolveProperty = currentState.breadcrumb.title.substr(1);
                          displayName = currentState.locals.globals[resolveProperty];
                      } else {
                          displayName = currentState.breadcrumb.title;
                      }
                      
                      return displayName;
                  }
                  

                  function getProperty(name, currentState) {
                      var propertyReference;

                      propertyArray = scope.displaynameProperty.split('.');
                      propertyReference = currentState;

                      for (i = 0; i < propertyArray.length; i++) {
                          if (angular.isDefined(propertyReference[propertyArray[i]])) {
                              if (propertyReference[propertyArray[i]] === false) {
                                  return false;
                              } else {
                                  propertyReference = propertyReference[propertyArray[i]];
                              }
                          } else {
                              // if the specified property was not foundm default to the state's name
                              return currentState.name;
                          }
                      }

                      return propertyReference;
                  }
              }
          };
      })
    ;
    
    

//myApp.factory('myService', function() {});
myApp.config(function ($stateProvider, $urlRouterProvider) {

    $stateProvider.state({
            url: "/home",
            breadcrumb: {
                title: "home",
                state: "home"
            }
        )
        
        
    $stateProvider.state({
            url: "/",
            breadcrumb: {
                title: "home",
                state: "home"
            }
        )
        
        $stateProvider.state({url: "/home/inbed",
            breadcrumb: {
                title: "bed",
                state: "home.bed"
            })
        
    $stateProvider.state({url: "/home/inbed/sleeping",
            breadcrumb: {
                title: "sleeping",
                state: "home.bed.sleeping"
            })
        
    });


<ol class="breadcrumb no-margin">
  <li data-ng-repeat="crumb in breadcrumbs" data-ng-class="{ active: $last }">
      <a data-ui-sref="{{ crumb.route }}" data-ng-if="!$last">{{ crumb.displayName }}</a>
      <span data-ng-show="$last">{{ crumb.displayName }}</span>
  </li>
</ol>