In my current project the solution looks like this:
I created an abstract Language State
$stateProvider.state('language', {
abstract: true,
url: '/:language',
template: '<div ui-view class="lang-{{language}}"></div>'
});
Every state in the project has to depend on this state
$stateProvider.state('language.dashboard', {
url: '/dashboard'
//....
});
The language switch buttons calls a custom function:
<a ng-click="footer.setLanguage('de')">de</a>
And the corresponding function looks like this (inside a controller of course):
this.setLanguage = function(lang) {
FooterLog.log('switch to language', lang);
$state.go($state.current, { language: lang }, {
location: true,
reload: true,
inherit: true
}).then(function() {
FooterLog.log('transition successfull');
});
};
This works, but there is a nicer solution just changing a value in the state params from html:
<a ui-sref="{ language: 'de' }">de</a>
Unfortunately this does not work, see https://github.com/angular-ui/ui-router/issues/1031