Angular-Translate Partial loader isn't working

Question

I'm using AngularJS translate, and If I use it as says the tutorial from pascalprecht my angular app fail and it doesn't show anything (it doesn't load partial views), so I decided to use angular-translate-partial-loader

I have one app menu, and I have a MenuCtrl to display options, I want to translate this menu

Here Is my code

 angular.module('myapp'['ngAnimate','ngAria','ngCookies','ngMessages','ngResource','ngRoute','ngSanitize', 'ngTouch', 'pascalprecht.translate'])
.value('language', 'bra')
.run(function ($rootScope, $translate) 
{
  $rootScope.$on('$translatePartialLoaderStructureChanged', function () 
        {
          $translate.refresh();
        }
    );
})
.config(function($translateProvider, $translatePartialLoaderProvider) {
$translateProvider.useLoader('$translatePartialLoader', {
  urlTemplate: 'translations/{lang}/{part}.json'
});
$translateProvider.preferredLanguage("bra");
})
.config(function ($routeProvider) {
$routeProvider
  .when('/', {
    templateUrl: 'views/main.html',
    controller: 'MainCtrl'
  })
  .when('/about', {
    templateUrl: 'views/about.html',
    controller: 'AboutCtrl'
  })
  .otherwise({
    redirectTo: '/'
  });
});

angular.module('myapp')
.controller('MenuCtrl', function ($scope, $translatePartialLoader) {

       $translatePartialLoader.addPart('menu');

        $scope.lItems = [
                    {
                        title: "HOME",
                        class:'active',
                        href:'/',
                        visible: true
                    },
                    {
                        title: "CLASSROOMS",
                        class:'',
                        href:'#',
                        visible: true
                    },    
                    {
                        title: "EXPENSES",
                        class:'',
                        href:'#',
                        visible: true
                    },
                    {
                        title: "EARNINGS",
                        class:'',
                        href:'#',
                        visible: true
                    },
                    {
                        title: "STUDENTS",
                        class:'',
                        href:'#',
                        visible: true
                    }
                ];


 });

In index.html

            <div id="navbar" class="navbar-collapse collapse" ng-controller="MenuCtrl">
                <ul class="nav navbar-nav" ng-repeat="lItem in lItems">
                    <li class="{{lItem.class}}"><a href="{{lItem.href}}">{{lItem.title |   translate}}</a></li>
                </ul>
            </div>

Can you help me?

Thanks!

Answer 1

Finally I found the solution.

The trouble was that the menu is out of ng-view block, and when the app loads doesn't refresh the correct html part.

By adding this $translatePartialLoaderProvider.addPart('menu');

 .config(function ($translateProvider, $translatePartialLoaderProvider) {

    $translatePartialLoaderProvider.addPart('menu');   

    $translateProvider.useLoader('$translatePartialLoader', {
     urlTemplate: 'translations/{lang}/{part}.json'
   });
   $translateProvider.preferredLanguage('bra');

....

When the application loads the menu part is also loaded.