gettext module in angularjs does does not translate gettextCatalog.getString() in controller

Question

Im using gettext module for angular to handle my translations. This works almost perfectn. gettext

Now i have 2 controllers. 1 is called basecontroller other controllers are per view. so the base controller is attached to the html tag and using ngRoutes i attach a diffrent controller to each view.

Now in the base controller i set language like this:

    //set lang
$rootScope.selectedLang = 'NL';

//Switch language
$scope.setLang = function(type,lang) {
    if (type == 'select') {
        ngDialog.open({
            template: 'views/popups/set-language.php',
            className: 'ngdialog-theme-flat',
            controller: 'BaseCtrl'
        });
    }

    if (type == 'set') {
        if (lang == 'nl') {
            gettextCatalog.setCurrentLanguage('nl');
            $rootScope.selectedLang = 'NL';
        }

        if (lang == 'en') {
            gettextCatalog.setCurrentLanguage('en');
            $rootScope.selectedLang = 'EN';
        }
        ngDialog.closeAll();
    }
}

this works fine. When user clicks on NL its translates to NL and when user clicks on EN it translates texts to eng.

The problem is that per controler I also have strings. these are in javascript so in searchcontroller for example i have:

    $rootScope.stepText = gettextCatalog.getString("step_1_header");

these translations are for global things like a header title, that changes per controller.

This also works fine but now the problem is the switch. When i switch to english all texts get translated but not the $rootScope.stepText = gettextCatalog.getString("step_1_header");

I think this is because i do the switch in the base controller. Does anyone have any idea to fix this ?

Answer 1

Anything that goes on the scope shouldn't use gettextCatalog.getString.

Use something like this:

$rootScope.stepText = gettext("My step 1 title");

And in the view:

<h1>{{stepText | translate}}</h1>