title: AngularJS and UI-Router multi-level breadcrumbs element
body: <p>I'm using AngularJS and UI-Router to make a little e-commerce product gallery. It should display a grid of images representing categories of products. When the user selects a category, the grid shall display the child categories of that one, and so on, until the user reaches a level where there are only products. Clicking in a product should display its details. Im using 2 states in UI-Router, one for the gallery and one for the details.</p>
  
  <pre><code>app.config(function($stateProvider){
  
      $stateProvider
          // Gallery State
          .state('gallery', {
              url: '/products/:category',
              templateUrl: 'views/gallery.html',
              controller: 'galleryCtrl'
          })
          // Details State
          .state('details', {
              url: '/details/:id',
              templateUrl: 'views/details.html',
              controller: 'detailsCtrl'
          });
  });
  </code></pre>
  
  <p>In the 'gallery' state, the controller uses the :category parameter to get from the database all subcategories or products of that category to display in the grid. The 'details' state's controller uses an analog strategy to get the product's information with the :id parameter.
  Now I want to make a breadcrumb element that shows the 'path' the user went through the gallery. For example, if the user selects the "Computers" category, then the "Notebooks" category and then "Foo Notebook", the breadcrumb should display:</p>
  
  <pre><code>Computers &gt; Notebooks &gt; Foo Notebook
  </code></pre>
  
  <p>I've found solutions that get the state hierarchy from UI-Router to create the breadcrumb. The problem is, with only the 2 states I created, the breadcrumb wouldn't show all categories, just the last selected one. I don't want to create a state for each category because the number and hierarchy of categories can change. Is there any way to accomplish this?</p>