Curly brackets not working consistently in AngularJS

Question

I'm developing a SPA using AngularJS (and Bootstrap) and there are several controllers, each for a specific page and function. Since the site must support any language, all the labels are retrieved from the DB upon language selection, and added to the $rootScope (ie $rootScope.Labels). This works perfectly when used like:

  <h2>{{Labels.Title}}:</h2>

Now, there is a page when additional data is constructed and added to the $rootScope for presentation, something like $rootScope.Page_A_Values.

When running in debug mode (Chrome) and both printing to console the contents of $rootScope.Page_A_Values, all the defined string are there as expected.

Within the HTML of the page I included something like:

 <h2>{{Labels.This_Page_Title}}: {{Page_A_Values.Actual_Title}}</h2>

getting:

 Title:

("Title" is the value of "Labels.This_Page_Title")

meaning, "Page_A_Values.Actual_Title" is replaced to nothing (I guess that the replacement takes place because the curly brackets are not shown).

Needless to say, I tried {{$rootScope.Page_A_Values.Actual_Title}} and didn't work either.

Answer 1

STUPID ME! The structure with the contents from the page controller is a JSON, and forgot to "parse" the string into a real JSON object. Now it works as expected.