How to use angular-gettext in a config phase?

Question

I'm using angular-gettext, angular-breadcrumb and angular-ui-router.

I have my app configuration similar to this:

app.config(function($stateProvider) {

  $stateProvider.state('welcome', {
     url : '/',
     templateUrl: 'index.html',
     ncyBreadcrumb : {
        label : 'Home'
     }
  });

});

I would like to be able to translate the label for the breadcrumb ('Home') by angular-gettext. In order to this I need to include gettext tools into the app.config() function. Something like this would be ideal, however gettextCatalog isn't available during the config phase:

app.config(function($stateProvider, gettextCatalog) {

  $stateProvider.state('welcome', {
     url : '/',
     templateUrl: 'index.html',
     ncyBreadcrumb : {
        label : gettextCatalog.getString('Home')
     }
  });

});

Is there any other way to achieve this with these plugins, especially with the angular-gettext?

Answer 1

According to the angular-breadcrumb docs:

The property ncyBreadcrumbLabel can contains bindings which are evaluated against the scope of the current state controller.

I haven't tested this, but I would think you could use the gettextCatalog module in your controller:

$stateProvider.state('home', {
  url: '/',
  templateUrl: 'index.html',
  controller: function($scope, gettextCatalog) {
    $scope.label = gettextCatalog.getString('Home');
  },
  ncyBreadcrumb: {
    label: '{{label}}'
  }
})