title: How to use translate in angularjs?
body: <p>Hi I am new to angularjs world. I am doing registration page and my app contains English and Arabic pages. I am storing English and Arabic words in JSON files. This is my index.html file.</p>
  
  <pre><code>&lt;body ng-app="RoslpApp"&gt;
      &lt;div ng-controller="RoslpAppController"&gt;
          &lt;div class="popup"&gt;
              &lt;label&gt;Language&lt;/label&gt;
              &lt;select ng-model="selectedItem"&gt;
                  &lt;option&gt;العربية&lt;/option&gt;
                  &lt;option&gt;English&lt;/option&gt;
              &lt;/select&gt;
              &lt;button ng-click="clickHandler(selectedItem)"&gt;Submit&lt;/button&gt;
              &lt;ul id="nav"&gt;
              &lt;li&gt;&lt;a ui-sref="Registration"&gt;Registration&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;div class="container"&gt;
              &lt;div ui-view&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>This is my main.js file.</p>
  
  <pre><code>var app = angular.module('RoslpApp', ['pascalprecht.translate', 'ui.router']);
  app.config(function ($stateProvider, $urlRouterProvider, $urlRouterProvider, $translateProvider, $translatePartialLoaderProvider) {
      $stateProvider
             .state('Registration', {
                 url: '/Registration',
                 templateUrl: 'Registration/Registration.html'
             });
      $translatePartialLoaderProvider.addPart('Registration');
      $translateProvider.useLoader('$translatePartialLoader', {
          urlTemplate: "/scripts/Locales/{part}/{lang}.json"
      });
      $translateProvider.preferredLanguage('de_EN');
  });
  app.run(function ($rootScope, $translate) {
      $rootScope.$on('$translatePartialLoaderStructureChanged', function () {
          $translate.refresh();
      });
  });
  app.controller('RoslpAppController', ['$scope', '$translate', function ($scope, $translate) {
      $scope.clickHandler = function (key) {
          $translate.use(key);
      };
  }]);
  </code></pre>
  
  <p>This is my registrationcontroller.</p>
  
  <pre><code>(function () {
      angular.module('RoslpApp').controller('RegistrationController', ['$rootScope', '$translatePartialLoader', '$translate', function ($rootScope, $translatePartialLoader, $translate) {
          $translatePartialLoader.addPart('Registration');
          var isPartAvailable = $translatePartialLoader.isPartAvailable('Registration');
          if (isPartAvailable) {
              $translate('Fname').then(function (data) {
                  $rootScope.PageSubTitle = data;
                  console.log($rootScope.PageSubTitle);
              });
          }
      }]);
  })();
  </code></pre>
  
  <p>This is my Registration.html. I am posting only one field to save space.</p>
  
  <pre><code>&lt;label&gt;First Name&lt;/label&gt;
                      &lt;input type="text" id="FirstName" class="FirstName" translate="yes" &gt;
  </code></pre>
  
  <p>This is my de_EN.json file.</p>
  
  <pre><code>{
      "Fname":"Fnamein English"
  }
  </code></pre>
  
  <p>I have arabic file also. I am not able to translate Fname in the above code. May I get some help here to fix this. Any help would be appreciated. Thank you.<a href="https://i.stack.imgur.com/dL1d1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dL1d1.png" alt="Folder structure"></a></p>