My Recommendation: Avoid Translating in the Controller, Opt for Translating in Your View Instead

I suggest keeping your controller clean from translation logic and instead translating strings directly within your view. Here's an example:

<h1>{{ 'TITLE.HELLO_WORLD' | translate }}</h1>

Utilizing the Provided Service

Angular Translate offers the $translate service that can be utilized in your controllers.

An instance of utilizing the $translate service may look like this:

.controller('TranslateMe', ['$scope', '$translate', function ($scope, $translate) {
    $translate('PAGE.TITLE')
        .then(function (translatedValue) {
            $scope.pageTitle = translatedValue;
        });
});

The translate service also provides a method to instantly translate strings without needing to deal with promises, using $translate.instant():

.controller('TranslateMe', ['$scope', '$translate', function ($scope, $translate) {
    $scope.pageTitle = $translate.instant('TITLE.DASHBOARD'); // Assuming TITLE.DASHBOARD is defined
});

A potential drawback of using $translate.instant() is that the language file might not be loaded yet if you are loading it asynchronously.

Using the Provided Filter

This is my preferred approach as it eliminates the need to handle promises. The filter output can be directly assigned to a scope variable.

.controller('TranslateMe', ['$scope', '$filter', function ($scope, $filter) {
    var $translate = $filter('translate');

    $scope.pageTitle = $translate('TITLE.DASHBOARD'); // Assuming TITLE.DASHBOARD is defined
});

Opting for the Provided Directive

Given that @PascalPrecht is the mastermind behind this fantastic library, I suggest following his recommendation (refer to his answer below) and make use of the provided directive which efficiently handles translations.

The directive manages asynchronous execution and intelligently unwatch translation ids on the scope when the translation has no dynamic values.

It is recommended to utilize the translate directive for handling such content instead.

<h1 translate="{{pageTitle}}"></h1>

This directive manages asynchronous execution and automatically unwatch translation ids on the scope if the translation doesn't include dynamic values.

If there's no alternative and you absolutely must use the $translate service in the controller, then wrap the call within a $translateChangeSuccess event using $rootScope along with $translate.instant() like so:

.controller('foo', function ($rootScope, $scope, $translate) {
  $rootScope.$on('$translateChangeSuccess', function () {
    $scope.pageTitle = $translate.instant('PAGE.TITLE');
  });
})

Why use $rootScope over $scope? Angular-translate's events are $emited on $rootScope rather than $broadcasted on $scope because broadcasting throughout the entire scope hierarchy isn't necessary.

Instead of asynchronous $translate(), why use $translate.instant()? When the $translateChangeSuccess event triggers, it guarantees that the required translation data is available without any asynchronous processes (e.g., loader execution). Therefore, we can directly use $translate.instant() which operates synchronously assuming translations are accessible.

Starting from version 2.8.0, $translate.onReady() is also introduced, offering a promise resolved once translations are fully loaded. Check out the changelog for more details.

If you want to perform a translation in the controller, you can utilize the $translate service:

$translate(['COMMON.SI', 'COMMON.NO']).then(function (translations) {
    vm.si = translations['COMMON.SI'];
    vm.no = translations['COMMON.NO'];
});

This code snippet only handles the translation when the controller is activated and does not account for runtime changes in language. To address this, you can listen for the $rootScope event: $translateChangeSuccess and perform the same translation within that event:

    $rootScope.$on('$translateChangeSuccess', function () {
        $translate(['COMMON.SI', 'COMMON.NO']).then(function (translations) {
            vm.si = translations['COMMON.SI'];
            vm.no = translations['COMMON.NO'];
        });
    });

Alternatively, you could create a method that encapsulates the $translate service and call it both in the controller and within the $translateChangeSucess listener.

Angular-translate operates on an event-based system, which causes a delay in displaying translated text. This is because the translation data must be immediately visible to the user and cannot wait until after the page loads. Debugging this issue requires significant development work as each string on the site needs to be manually extracted, placed in a .json file, and referenced by a specific code.

In addition, maintaining translations becomes complex as underlying text changes necessitate updating translation files, sending them out to translators, reintegrating them into the build, and redeploying the site. The event-driven nature of Angular-translate further complicates things by firing events for every string on the page, potentially slowing down page transformations and actions.

An alternative approach is using a post-processing translation platform like GlobalizeIt. With GlobalizeIt, translators can directly edit text on the website for their language without requiring any programming knowledge. This platform seamlessly integrates with Angular, simplifies the translation process, and ensures that translated text is displayed during the initial page render.

If you're interested, you can learn more about how GlobalizeIt works here: , and explore its compatibility with Angular here: .

Disclaimer: I'm a co-founder of GlobalizeIt :)