angularJs - doubt with translate loaderPartial

config.js

(function () {

    'use strict';

    var core = angular.module('app.core');

    core.config(translations);

    /* @ngInject */
    function translations($translateProvider) {
        $translateProvider.preferredLanguage('en');
        $translateProvider.useLoader('$translatePartialLoader', {
            urlTemplate: '/app/**/{part}/i18n/{lang}.json'
        });
    }

index.html

<!-- I add scripts in this order: -->

<script src="bower_components/javascripts/jquery.js"></script>
<script src="bower_components/javascripts/angular.js"></script>
<script src="bower_components/javascripts/ng-bootstrap.min.js"></script>
<script src="bower_components/javascripts/angular-sanitize.js"></script>
<script src="bower_components/javascripts/angular-translate.js"></script>
<script src="bower_components/javascripts/angular-translate-interpolation-messageformat.js"></script>
<script src="bower_components/javascripts/angular-translate-loader-partial.js"></script>
<script src="bower_components/javascripts/messageformat.js"></script>

preview

Screenshot the bug: https://snag.gy/BZch29.jpg

raw text:

'HOMEPAGE.TITLE'

'HOMEPAGE.DESC'

toolbar.controller.js

angular
        .module('app.toolbar')
        .controller('Toolbar', Toolbar);

    function Toolbar($translatePartialLoader) {
        /*jshint validthis: true */
        var vm = this;

        activate();

        function activate() {
            loadTranslation();
        }

        function loadTranslation() {
            $translatePartialLoader.addPart('toolbar');
        }

toolbar.html

<a class="navbar-brand" href="#">{{'TOOLBAR.HELLO' | translate}}</a>