breacrumb directive for angular-ui-router

This is a simple directive that creates breadcrumbs on the fly for Angular.js pages using angular-ui-router

(function() {
  'use strict';
  var app, loaded;

  loaded = false;

  app = angular.module('uiBreadcrumbs', ['ui.router', 'ngSanitize']);

  app.directive('uiBreadcrumb', ['$state', '$rootScope', function($state, $rootScope) {
    return {
      restrict: 'E',
      transclude: true,
      link: function(scope, element, attrs) {
        var abstract;
        attrs.abstract = attrs.abstract ? attrs.abstract : false;
        abstract = JSON.parse(attrs.abstract);

        /*
         * watch for trasition success events
         * on state change success load breadcrumbs
         */
        $rootScope.$on('updateBreadCrumbs', function(event, trans) {
          var i, parentStates, stateArray;
          loaded = true;
          scope.$breadcrumbs = [];
          stateArray = [];
          parentStates = [];

          /*
           * gets all states
           */
          for (i in $state.$current.includes) {
            stateArray.push(i);
          }

          /*
           * get parent state details
           */
          for (i in stateArray) {
            if (stateArray[i] !== '') {
              if ($state.get(stateArray[i]).$$state().parent.self.name !== '') {
                parentStates.push($state.get(stateArray[i]).$$state().parent.self);
              }
            }
          }

          /*
           * if abstract is false
           * removes abstract states from breadcrumbs
           */
          if (!abstract) {
            for (i in parentStates) {
              if (!parentStates[i].abstract) {
                scope.$breadcrumbs.push(parentStates[i]);
              }
            }
          } else {
            scope.$breadcrumbs = parentStates;
          }

          /*
           * add current state to breadcrumbs
           */
          scope.$breadcrumbs.push($state.current);
        });
      },
      template: '<ol class="breadcrumb">' + '  <li ng-repeat="data in $breadcrumbs"><a ui-sref="{{data.abstract || data.name}}" ng-class="{\'disabled\': data.abstract}">{{data.label || data.name}}</a></li>' + '</ol>'
    };
  }]);

  app.run(['$rootScope', '$transitions', '$timeout', function($rootScope, $transitions, $timeout) {
    return $transitions.onSuccess({}, function(trans) {
      if (loaded) {
        $timeout(function() {
          $rootScope.$emit('updateBreadCrumbs', trans);
        }, 0);
      } else {
        $timeout(function() {
          $rootScope.$emit('updateBreadCrumbs', trans);
        }, 1000);
      }
    });
  }]);

}).call(this);

This directive creates breadcrumbs dynamically on page load and on any successful state change.

The directive works well with normal angular.js applications but does not work well with require.js apps. so I came up with a temporary solution that sets a loaded state. when the loaded state is false i.e., at page load the timeout is set for 1000 ms once the function is executed then the loaded state is set to true. then on the next time update happens with less time interval. I am not sure of things that I miss for require.js applications to load this properly.