breadcrubmTemplate.jade

div(id="breadcrumbs")
 span(ng-repeat="breadcrumb in breadcrumbs")
  #[button(ui-sref="{{breadcrumb.path}}", class="link") {{breadcrumb.name}}]/

breadcrumbStyle.styl

#breadcrumbs
  margin-bottom 10px
  font-size 85%
  background-color $super-light-grey
  padding 5px
  border 1px $lighter-grey solid
  button
    color $link-color

breadcrumDirective.js

module.exports = [`$rootScope`, `$state`, `$compile`,
($rootScope, $state, $compile) => {
  return {
    restrict: `E`,
    link: (scope, ele, attr) => {
      const createBreadCrumbObject = array => {
        let newArray = []

        const pushObj = (name, path) => {
          return {
            name: name,
            path: path
          }
        }

        const checkForQuery = string => {
          var stringArr = string.split('')
          if(stringArr.indexOf('?') !== -1){
            return string.replace(/\?(.*)/, '')
          }
          return string
        }

        for(let i = 0; i < array.length; i++){
          array[i] = checkForQuery(array[i])
          if(i === 0){
            newArray.push(pushObj(array[i], array[i]))
          }
          else{
            let pathStr = ``
            for(let j = 0; j < i; j++){
              if (pathStr.length === 0)
                pathStr = `${newArray[j].path}.${array[j+1]}`
              else
                pathStr = `${pathStr}.${array[j+1]}`
            }
            newArray.push(pushObj(array[i], pathStr))
          }
        }
        return newArray
      }

      $rootScope.$on(`$stateChangeSuccess`,
        (event, toState, toParams, fromState, fromParams) => {
          let url = toState.name.split(`.`)
          scope.breadcrumbs = createBreadCrumbObject(url)
        }
      )
    },
    templateUrl: `./../../templates/directives/breadcrumbs.html`
  }
}]