How to use i18n on angularjs 1.6

Question

How I should use i18n so the variable "title" takes the value from the traslatated json. It should return "Mis viajes" and right now it is not returning anything. Thanks trips-header.jade

I did this and I get "0" on the screen.

.trips-header
    .background-image
    .header-content
        p.title.ng-i18next {{   title | i18next}} 
        p.sub-title.ng-i18next {{   sub-title | i18next}} 

Mi json

 {
  "es-AR": {
      "translation": {
         "title":"Mis Viajes!",
         "sub-title": " te ayuda a planificar y organizar tus viajes."
      }
  }
}

Answer 1

Here is a sample approach. You want html to look like this:

<h1>{{'hello' | i18next}}</h1>

Your jade is this:

- var foo = "{{hello | i18next}}"
h1= foo

Your translation is this:

{
  "es-AR": {
      "translation": {
          "hello":"hi!"
       }
    }
}

Your i18n in angular should be properly configured:

yourApp.config( ['$i18nextProvider',function( $i18nextProvider ) {
    $i18nextProvider.options = {
        lng: 'es-AR', //select or detect from browser
        useCookie: false,
        useLocalStorage: false,
        fallbackLng: 'en',
        resGetPath:  l_prefix + 'locales/__lng__/__ns__.json',
        defaultLoadingValue: ''
    }
// file is expected to be locales/es-AR/translation.json
..... remaining of the config

EDIT: added quotes around the 'hello'. Now it is treated as a text and not a variable.