Dynamic breadcrumb labels are empty on page reload

I have a page that lists locations with the ability to click on a location to see details. The breadcrumbs work fine when clicking on an item from the list (Home > Locations > State > City > Location name).

The problem is if you’re on a location detail page and reload the page in your browser then the dynamic labels in the breadcrumb are empty (Home > Locations > > >). The details page displays fine otherwise

There is a common on another issue mentioning this same problem. https://github.com/ncuillery/angular-breadcrumb/issues/107#issuecomment-143161637

      .state('app.locations.detail', {
        url: '/:id',
        views: {
          'content@': {
            controller: 'LocationDisplayController',
            templateUrl: '/app/location/html/location-detail.html',
          }
        },
        ncyBreadcrumb: {
          label: '{{location.name}}',
          parent: 'app.locations.city'
        },
      });

Note: the problem is still there even if I simplify the breadcrumbs so that location names immediately follow the default app state.

If I change the label to Testing {{location.name}} then you will see Home > Locations > > > Testing.

[ismailatkurt]

If you use $rootScope instead of $scope at controller it will work. But i’m not sure its the right way?

  $rootScope.foo = 'test';

will be work perfect at:

ncyBreadcrumb: {
    label: '{{foo}}',
    parent: 'myparent'
},

[nbasov]

Here is an old issue about this problem https://github.com/ncuillery/angular-breadcrumb/issues/42 Solved by injecting $breadcrumb into application .run method.