title: Angular translate not working between 2 controllers
body: <p>I would like to use i18n and i10n in my Angular app.</p>
  
  <p>I read that Angular-translate can help with this, however, it doesn't work for me.</p>
  
  <p>In my index.html:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html ng-app="eApp"&gt;
  
      &lt;head&gt;
          &lt;meta charset="utf-8" /&gt;
          &lt;link rel="stylesheet" type="text/css" href="../common/css/bootstrap.css" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="../common/css/style.css" /&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body ng-controller="AppCtrl"&gt;
       &lt;div id="container" ng-view&gt;&lt;/div&gt;
      &lt;!--- Libs Js files  ---&gt;
      &lt;script type="text/javascript" src="../vendor/angularjs/angular.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="../vendor/angularjs/angular-route.min.js"&gt;&lt;/script&gt;
     &lt;script type="text/javascript" src="../vendor/angularjs/angular-translate.min.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>In my eApp.js:</p>
  
  <pre><code>var eApp = angular.module('elbitApp', ['ngRoute', 'ui.bootstrap', 'config', 'pascalprecht.translate']);
  
  // configure our routes
  eApp.config(["$routeProvider",
  function ($routeProvider) {
      $routeProvider
  
      // route for the home page
      .when('/c', {
          templateUrl: 'c/partials/c.html',
          controller: 'CController'
      })
  
      // route for the about page
      .when('/de', {
          templateUrl: 'd/partials/dE.html',
          controller: 'DEController',
          resolve: {
              data: function (DDataService) {
                  return DDataService.loadData().then(function (response) {
                      return response.data;
                  });
              }
          }
      })
  
      // route for the contact page
      .when('/di', {
          templateUrl: 'd/partials/di.html',
          controller: 'DIController',
          resolve: {
              data: function (DDataService) {
                  return DDataService.loadData().then(function (response) {
                      return response.data;
                  });
              }
          }
      }).otherwise({
          redirectTo: '/di'
      });
  }]).config(["$httpProvider",
  function ($httpProvider) {
      // Configure the $httpProvider to parse date with date transformer
      $httpProvider.defaults.transformResponse.push(function (responseData) {
          convertDateStringsToDates(responseData);
          return responseData;
          }); 
  }]).config(["$translateProvider",
      function ($translateProvider) {
      $translateProvider.translations('en', {
          "TITLE": 'Hello',
          "FOO": 'This is a paragraph.',
          "BUTTON_LANG_EN": 'english',
          "BUTTON_LANG_DE": 'german'
      });
        $translateProvider.translations('de', {
          "TITLE": 'Hallo',
          "FOO": 'Dies ist ein Paragraph.',
          "BUTTON_LANG_EN": 'englisch',
          "BUTTON_LANG_DE": 'deutsch'
        });
      $translateProvider.preferredLanguage('en');
  }]);
  
  
  // main controller that catches resolving issues of the other controllers
  eApp.controller('AppCtrl', function ($rootScope) {
  $rootScope.$on("$routeChangeError", function (event, current, previous, rejection) {
      alert("Cant resolve the request of the controller "); //TODO: add URL + additional data.
  })
  });
  </code></pre>
  
  <p>In this file I defined my app and added the <code>$translateProvider</code> and two dictionaries.</p>
  
  <p>Afterwards I got to my <code>deController.js</code>:</p>
  
  <pre><code>eApp.controller('DispatcherEventsController', ['$scope', '$route', '$translate', 
                      function($scope, $route, $translate){
  
      var data = $route.current.locals.data;
  
  
  
      $scope.title = $translate.instant("FOO");
  
  
      $scope.switchLanguage = function(languageKey){
          $translate.use(languageKey);
      };
  }]);
  </code></pre>
  
  <p>In <code>de.html</code> I added a <code>h1</code> tag with <code>FOO</code> and in a click I would like to change to German:</p>
  
  <pre><code>&lt;h1&gt;{{title |translate}}&lt;/h1&gt;
  &lt;h1 translate="{{title}}"&gt;&lt;/h1&gt;
  &lt;button type="button" id="searchButton" class="btn btn-default" ng-click="switchLanguage('de')"&gt;German&lt;/button&gt;
  </code></pre>
  
  <p>I don't get any problem, but nothing happens. I expected that the English title will be converted to German title. </p>
  
  <p>What can I do to make this work?</p>