AngularJS Translation - Multilingual

var app = angular.module('myApp', ['pascalprecht.translate']);

app.run(['$rootScope', function($rootScope) {
    $rootScope.lang = 'en';
}])

app.config(function ($translateProvider) {
    $translateProvider
    .useStaticFilesLoader({
        prefix: 'locales/locale-',
        suffix: '.json'
    })
    .useSanitizeValueStrategy('sanitizeParameters')    
    .preferredLanguage('en');
});

app.controller('Ctrl', function ($scope, $rootScope, $translate) {
    $scope.changeLanguage = function (key) {
        $rootScope.lang = key;
        $translate.use(key);
    };
});

<!DOCTYPE html>
<html lang="{{ lang }}" ng-app="myApp">

<head>
	<meta charset="utf-8" />
	<title>AngularJS Routing: angular-route</title>
	<!--<script>document.write('<base href="' + document.location + '" />');</script>-->

	<link rel="stylesheet" href="style.css" />

	<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/angular-translate/2.18.1/angular-translate.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/angular-translate/2.18.1/angular-translate-loader-static-files/angular-translate-loader-static-files.min.js"></script>
	<script src="app.js"></script>
</head>

<body ng-controller="Ctrl">
	<h1>AngularJS Translation</h1>
      
	<div>
		<button ng-show="lang === 'vn'" ng-click="changeLanguage('en')">{{'BUTTON_LANG' | translate | uppercase}}</button>
		<button ng-show="lang === 'en'" ng-click="changeLanguage('vn')">{{'BUTTON_LANG' | translate | uppercase}}</button>
	</div>
	
	<h2>{{ 'TITLE' | translate}}</h2>          
	<p>{{'FOO' | translate}}</p>
</body>

</html>

/* Put your css in here */

.active { 
  color: red; 
  font-weight: bold; 
}

{
    "TITLE": "Hello",
    "FOO": "This is a paragraph.",
    "BUTTON_LANG": "tiếng việt"
}

{
    "TITLE": "Xin chào",
    "FOO": "Đây là một đoạn văn.",
    "BUTTON_LANG": "english"
}