Annoyingly difficult to get to the bottom of:
If the expression didn’t generate an error during angular’s link / render, I don’t think it would have the effect you want anyway. I think the presence of an interpolated expression as the content of an element is equivalent to setting it in ng-bind. You want the content to be interpreted as html, so you’d use ng-bind-html. As it is, I think you’d see the literal string
'<b>Cat</b>' as opposed to the word Cat
There are two parsers at play; the html parser parsing tokens for the html in your page, before angular ever gets it’s hands on it, and the angular / js parser kicking in when the html parser has done it’s bit.
I think the embedded tags in the string constant are confusing the html parser so that the correct value isn’t being passed to the angular / js parser and it’s generating an error.
I’ve tried quite a few variations splitting and escaping strings etc. but no success.
(At this point, I’m not concerned about your question so much, but it’s clear there’s part of the process I don’t understand to my satisfaction )
I don’t see this, as I tend to wrap the majority of these things in small scope level functions or variables and use those instead.
So in your case, I’d have a bit of code on the scope that looked like:
$scope.dogOrCat = (1 == 1) ? 'dog' : '<b>Cat</b>' ;
and in my template I’d use:
I tend to do that for even small fragments now as they tend to turn into larger fragments, and naming the variable bound to appropriately conveys the intention.
That said, still mulling over how you’d embed inline as you’re trying, and which step is causing the problem