AngularJS does not translate correctly with translate-value

Question

I got a small problem with my I18n integration.

AngularJS seems to skip one translation in the whole page. Everything translates fine except for one tag.

I get my translations through JSON.

{
"password": {
    "title": "Wachtwoord voor [<b>{{username}}</b>]",
    "form": {
        "button": "Opslaan"
    },
    "messages": {
        "error":  "<strong>Er is een fout opgetreden!</strong> Het wachtwoord kon niet worden veranderd.",
        "success": "<strong>Wachtwoord veranderd!</strong>"
    }
}
}

The line in the HTML:

<h2 translate="password.title" translate-values="{username: '{{account.login}}'}">Password for [<b>{{account.login}}</b>]</h2>

This just displays Password for [Admin].

The request for the password.json file contains exact the same as i stated above. The html contains this when inspected through the Chrome Console:

<h2 translate="password.title" translate-values="{username: 'admin'}" class="ng-scope">Password for [admin]</h2>

Everything else (Without those translate-values) translate fine. But this line doesnt. Why doesnt it work? The login name is correctly passed.

Thanks in advance.

Cheers!

Answer 1

If you use the translate directive, there is no need to add content inside the h2 tag. So, the following should work :

<h2 translate="password.title" translate-values="{username: '{{account.login}}'}"></h2>