angular-foundation and angular-translate: apply translation into attribute back-text - angularjs

Question

I'm using angular-translation and angular-foundation modules with AngularJS and have defined Foundation top-bar like this:
<top-bar custom-back-text="true" back-text="My back text">
[...]
</top-bar>
I need to apply translate filter to My back text. Already tried these two solutions but with no success:
example 1 - CODE
<top-bar custom-back-text="true" back-text="'BACK.KEY' | translate">
example 1 - TEXT IN MENU
BACK.KEY
example 2 - CODE
<top-bar custom-back-text="true" back-text="{{ 'BACK.KEY' | translate }}">
example 2 - TEXT IN MENU
'BACK.KEY' | translate
Do I something wrong or is there no possibility to achieve this with these two modules?
Used versions
angular-translate: 2.4.2
angular-foundation: 0.5.1

Answer 1

If you check the js source code of foundation you will find this piece of code that handles back button
if (settings.custom_back_text == true) {
$('h5>a', $titleLi).html(settings.back_text);
} else {
$('h5>a', $titleLi).html('« ' + $link.html());
}
$dropdown.prepend($titleLi);
So it creates new element and adds to dropdown, result of which is that it copies the value you specified in the back_text. By that time "translate" is not resolved so it copies whatever you put there.
A quick hack to do to solve it you could listen for language change by doing
$rootScope.$on("$translateChangeSuccess", function...
As you can see in the piece of code from foundation.js it creates "a" element inside "h5", so you can do something like this
$rootScope.$on("$translateChangeSuccess", function(){
angular.element(".dropdown h5>a").html($filter('translate')('BACK'))
})
where "BACK" is the key used for translation.
But keep in mind that it's not a good practice to manipulate DOM inside controller, so you may create directive for that.
Though there may be better way to achieve it, this could be just quick hack to do the thing.