title: angular-translate between different views
body: <p>I started developing an Angularjs web app and I'm using angular-translate in my app and I don't know what is the best way to use angular-translate when I have different views.</p>
  
  <p>I installed angular-translate-loader-static-files on my app and I would like to have a language button on header of my template when clicked change the language of the current view. The views are separated in different controllers and in my index.html:</p>
  
  <pre><code>&lt;div ng-controller='HeaderController'&gt;
  &lt;button ng-click="changeLanguage('pt')" translate="BUTTON_LANG_PT"&gt;&lt;/button&gt;
        &lt;button ng-click="changeLanguage('en')" translate="BUTTON_LANG_EN"&gt;&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My translate module:</p>
  
  <pre><code>angular.module('elapApp.translate', ['pascalprecht.translate'])
  
  .config(['$translateProvider', function($translateProvider) {
    // configures staticFilesLoader
    $translateProvider.useStaticFilesLoader({
      prefix: 'messages/locale-',
      suffix: '.json'
    });
    // load 'en' table on startup
    $translateProvider.preferredLanguage('pt');
  }])
  .controller('HeaderController', ['$translate', '$scope', function ($translate, $scope) {
  
    $scope.changeLanguage = function (langKey) {
      $translate.use(langKey);
    };
  }]);
  </code></pre>
  
  <p>view.html example:</p>
  
  <pre><code> &lt;table class="table table-striped table-bordered"&gt;
              &lt;thead&gt;
                  &lt;th translate&gt;AUTHOR_NAME&lt;/th&gt;
                  &lt;th translate&gt;AUTHOR_BIOGRAPHY&lt;/th&gt;
                  &lt;th translate&gt;AUTHOR_WEBSITE&lt;/th&gt;
                  &lt;th translate&gt;COMMON_ACTION&lt;/th&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  &lt;tr ng-repeat="data in authors"&gt;
                      &lt;td&gt;{{data.author_name}}&lt;/td&gt;
                      &lt;td&gt;{{data.author_biography}}&lt;/td&gt;
                      &lt;td&gt;{{data.author_website}}&lt;/td&gt;
                      &lt;td&gt;&lt;a href="#/edit-author/{{data.author_id}}" class="btn"&gt;&amp;nbsp;&lt;i class="glyphicon glyphicon-edit"&gt;&lt;/i&gt; Edit Author&lt;/a&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
  </code></pre>
  
  <p>And view module:</p>
  
  <pre><code>angular.module('elapApp.authors', ['elapApp.services','ngRoute', 'elapApp.translate'])
  
  .config(['$routeProvider',
      function($routeProvider) {
          $routeProvider.when('/', {
          title: 'Authors',
          templateUrl: 'partials/authors/authors.html',
          controller: 'AuthorsCtrl'
        }).when('/authors', {
              templateUrl: 'partials/authors/authors.html',
              controller: 'AuthorsCtrl'
          });
      }
  ])
  
  .controller('AuthorsCtrl', ['$scope', 'Authors', function($scope, Authors) {
      Authors.getAuthors().then(function(data){
          $scope.authors = data.data;
      });
  
  }]).run(['$location', '$rootScope',
      function($location, $rootScope) {
          $rootScope.$on('$routeChangeSuccess', function(event, current, previous) {
              $rootScope.title = current.$$route.title;
          });
      }
  ]);
  </code></pre>
  
  <p>So, in this scenario when I clicked on language button every data in my header change language correctly, but in my view nothing happens. How can I change the language of my view in this situation?</p>
  
  <p>Can you help me?</p>
  
  <p>Thanks. All the best!</p>