Nested AngularJS ng-bind

Question

I have an error modal that displays a message if an $http post returns a certain status. I now need to be able to add an error code to the display. The customer wants it to be on the same line as the message, but styled differently (small font), so I tried this:

<p class="text-center" data-ng-bind-html="message">
   <span data-ng-if="errCode" class="small" data-ng-bind="' code ' + (errCode)"></span>
</p>

The data being passed into my template looks like this:

{title: "Login Error", message: "Server Response Error", errCode: 106, button: "OK"}

What they want is something like this:

Server Response Error code 106

with the "code 106" being a smaller font (sorry, can't figure out how to change span styles in markdown.) But with the code above, the span is being overwritten by the message binding in the outer paragraph tag. How can I use nested ng-bind elements? (Concatenating the values before passing them in as a single variable is not an option.)

Answer 1

You need to use inline elements as siblings to do this. ng-bind-html replaces innerHTML

<p class="text-center">
   <span  data-ng-bind-html="message"></span>
   <span data-ng-if="errCode" class="small" data-ng-bind="' code ' + (errCode)"></span>
</p>