<!DOCTYPE html>
<html ng-app="DynamicLocaleExample">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.js"></script>
<script src="http://lgalfaso.github.io/angular-dynamic-locale/src/tmhDynamicLocale.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="script.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" data-ng-controller="ExampleCtrl">
<h4>Example</h4>
<p>Pick a locale <select ng-model="model.selectedLocale" ng-options="key as value for (key, value) in availableLocales" ng-change="changeLocale(model.selectedLocale)"></select></p>
<p>Selected locale id: {{model.selectedLocale}}</p>
<div class="well well-small pull-left" ng-model="dt">
<datepicker min="minDate" show-weeks="showWeeks"></datepicker>
</div>
</div>
</body>
</html>
angular.module('DynamicLocaleExample', ['tmh.dynamicLocale', 'ui.bootstrap'])
.config(function(tmhDynamicLocaleProvider) {
tmhDynamicLocaleProvider.localeLocationPattern('https://code.angularjs.org/1.2.20/i18n/angular-locale_{{locale}}.js');
})
.controller('ExampleCtrl', function($rootScope, $filter, $timeout, tmhDynamicLocale, $locale, $scope, $element) {
$rootScope.model = {selectedLocale: 'fr'};
$rootScope.changeLocale = tmhDynamicLocale.set('fr');
$rootScope.availableLocales = {
'en': 'English',
'de': 'German',
'fr': 'French',
'ar': 'Arabic',
'ja': 'Japanese',
'ko': 'Korean',
'zh': 'Chinese'};
$rootScope.$locale = $locale;
$rootScope.changeLocale = tmhDynamicLocale.set;
});