Making multilingual site by using angular-translate through url paths

Question

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

www.example.com/en
www.example.com/fr
www.example.com/de
www.example.com/pt

I tried to follow the instructions on the below posts, but couldn't make it work:

Localize URL's with ui-router and angular-translate

AngularJS SEO friendly translation URLs with ui-router

This is what I have so far:

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);
        }
    });

}]);

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?

Any help will be appreciated. Thanks