Interpreting HTML Tags in Javascript String Literal
angularjs, html, javascript, json
Solution
It is not straight forward. You need to use `ngBindHtml`.
Controller
$scope.content = "<b>this is bold content</b>";
HTML
<div ng-bind-html="content"></div>
You'll need the following module:
http://code.angularjs.org/1.0.3/angular-sanitize.js
Be sure to declare `ngSanitize` as a module dependancy, like this:
var app = angular.module('angularjs-starter', ["ngSanitize"]);
Problem
I make an AJAX call that gives me a string within a JSON object containing text formatted like this: ``` Your girl was in Berkeley with a communist reader. <br> Mine was entombed within boombox and walkman. <br> I was a hoarder, but girl, that was back then. <br> The gloves are off, the wisdom teeth are out. <br> What you on about? <br> I can feel it in my bones. <br> I can feel it in my bones. <br> I'm stronger now, I'm ready for the house. <br> Such a modest mouse. <br> I can't do this alone. ``` I use this string to populate a div on my webpage, such that it appears like this: ``` <div class="lyrics-container>{{ the text in the JSON string }} </div> ``` However, when populating the div with that text, I get the exact string, meaning that the `<br>`s show up as text. I want them to actually perform their function and break the line. Is there a way to coerce the browser into interpreting HTML within a string? I'm using Angular to grab the data and populate the div if that makes any difference.