angular-breadcrumb with dynamic steps

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <script data-require="angular.js@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
    <script data-require="angular-ui-router@0.2.10" data-semver="0.2.10" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
    <script data-require="angular-breadcrumb" src="https://rawgit.com/collabo-br/angular-breadcrumb/develop/dist/angular-breadcrumb.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app">
    <div ncy-breadcrumb-dynamic-chain ></div>
    <div ui-view=""></div>
  </body>

</html>

angular.module('app', ['ui.router', 'ncy-angular-breadcrumb'])
.config([
  '$stateProvider', 
  '$urlRouterProvider',  
  '$breadcrumbProvider',
  function ($stateProvider, $urlRouterProvider, $breadcrumbProvider){
  
    $stateProvider.state('home', {
      url: '/home',
      templateUrl: 'home.html',
      ncyBreadcrumb: {
        label: 'Home'
      }
    })
    .state('category', {
      url: '/cat/:id',
      templateUrl: 'category.html',
      controllerAs: 'ctrl',
      controller: ['$injector', function($injector){
        var $stateParams = $injector.get('$stateParams');
        
        
        this.isSubCategory = $stateParams.id > 1;
        this.title = 'Category ' + $stateParams.id;
        
      }],
      ncyBreadcrumb: {
        dynamicStatesChain : function($injector){
          var $q = $injector.get('$q');
          var $timeout = $injector.get('$timeout');
          var $stateParams = $injector.get('$stateParams');
          
          var deferred =  $q.defer();
          var steps = [];
          
          if ($stateParams.id == 1){
            $timeout(function getSteps() {
              steps.push({ 
                label : 'Category 1',
                state : 'category({id:1})'
                });
                
              deferred.resolve(steps);
            }, 300);
          }else{
            $timeout(function getSteps() {
              steps.push(
                { 
                label : 'Category 2',
                state : 'category({id:2})'
                },
                { 
                label : 'Category 1',
                state : 'category({id:1})'
                });
                
              deferred.resolve(steps);
            }, 300);
          }
          
          
          return deferred.promise;
          
          
        }
      }
    })
    .state('product', {
      url: '/product',
      templateUrl: 'product.html',
      ncyBreadcrumb: {
         dynamicStatesChain : function($injector){
          var $q = $injector.get('$q');
          var $timeout = $injector.get('$timeout');
          var $stateParams = $injector.get('$stateParams');
          
          var deferred =  $q.defer();
          var steps = [];
          
          
          $timeout(function getSteps() {
            steps.push(
              { 
                label : 'Product',
                state : 'product'
              },
              { 
                label : 'Category 2',
                state : 'category({id:2})'
              },
              { 
                label : 'Category 1',
                state : 'category({id:1})'
              });
                
              deferred.resolve(steps);
            }, 300);
          
          
          
          return deferred.promise;
        }
      }
    });
    
    $urlRouterProvider.otherwise('/home');
    
    
    $breadcrumbProvider.setOptions({
        prefixStateName: 'home',
        template: 'bootstrap3'
    });
  
  }
]);

/* Styles go here */

<div >
  <h2>Home view</h2>
  <p><a ui-sref="category({id : 1})">Category 1</a></p>
  
</div>
<div ui-view=""></div>

<div>
  <h2>{{ ctrl.title}} View </h2>
  
  <p ng-if="ctrl.isSubCategory"><a ui-sref="product">Product</a></p>
  <p  ng-if="!ctrl.isSubCategory"><a ui-sref="category({id : 2})">Sub-category</a></p>
</div>

<div>
  <h2>Product view</h2>
  
</div>