title: Making multilingual site by using angular-translate through url paths
body: <p>I'm trying to use the angular-translate to make a multilingual website. I want to show the site in different languages based on the url path as shown below</p>
  
  <pre><code>www.example.com/en
  www.example.com/fr
  www.example.com/de
  www.example.com/pt
  </code></pre>
  
  <p>I tried to follow the instructions on the below posts, but couldn't make it work: </p>
  
  <p><a href="https://stackoverflow.com/questions/24281652/localize-urls-with-ui-router-and-angular-translate">Localize URL's with ui-router and angular-translate</a></p>
  
  <p><a href="http://fadeit.dk/blog/post/angular-translate-ui-router-seo" rel="nofollow noreferrer">AngularJS SEO friendly translation URLs with ui-router</a></p>
  
  <p>This is what I have so far:</p>
  
  <pre><code>var app = angular.module('app', [
      'ui.router',
      'pascalprecht.translate'
  ]);
  
  app.config(['$stateProvider', '$translateProvider', function ($stateProvider, $translateProvider) {
  
      $stateProvider.state('app', {
          abstract: true,
          url: '/{lang}'
      });
      $stateProvider.state('app.home', {
          url: '',
          controller: 'mainController as main',
          templateUrl: 'views/home.html'
      });
  
      $translateProvider.useStaticFilesLoader({
          prefix: 'assets/locale/',
          suffix: '.json'
      });
      $translateProvider.useLocalStorage();
      $translateProvider.registerAvailableLanguageKeys(
          ['en', 'de', 'fr', 'pt'],
          {
              'en*': 'en',
              'de*': 'de',
              'fr*': 'fr',
              'pt*': 'pt',
              '*': 'en'
          }
      );
  
  }]);
  
  app.controller('mainController', ['$scope', '$rootScope', '$stateParams', '$translate', function ($scope, $rootScope, $stateParams, $translate) {
  
      $scope.$on('$stateChangeSuccess', function rootStateChangeSuccess(event, toState) {
          if($stateParams.lang !== undefined){
              var otherLang;
  
              if ($stateParams.lang == 'en') {
                  otherLang = 'en'
              } else if ($stateParams.lang == 'de') {
                  otherLang = 'de'
              } else if ($stateParams.lang == 'fr') {
                  otherLang = 'fr'
              } else if ($stateParams.lang == 'pt') {
                  otherLang == 'pt'
              } else {
                  otherLang == 'en'
              }
              $rootScope.activeLang = $stateParams.lang;
              $rootScope.otherLangURL = $location.absUrl().replace('/' + $stateParams.lang, '/' +otherLang);
              $translate.use($stateParams.lang);
          }
      });
  
  }]);
  </code></pre>
  
  <p>I've been wrestling with this problem without any progress. Can someone explain what I'm doing wrong and what I need to do? Or point to me to a github repo or a Plunkr demo?</p>
  
  <p>Any help will be appreciated. Thanks</p>