AngularJS - Render HTML tags that are contained in a string

Question

My database stores product information, and a lot of this is organised into lists. I load the data into Angular as $scope.post.

For instance,

$scope.post.size_description = '<li> Fits true to size. Take your normal size\r</li>
   <li> Slim-cut, mid-rise style</li>
   <li> Long in length, alter to fit</li>
   <li> Model wears an IT 48\r</li>
   <li> Model measures: waist size 32, height 6\'1"/ 185cm\r</li>'.

When I try to load this data into my Angular app, it gets rendered as text (i.e. the <li> are not parsed). I understand this probably happens for security reasons, but is there any way around it?

Answer 1

As Damax has said here: https://stackoverflow.com/a/11640420/769083

<div ng-bind-html-unsafe="post.size_description"></div>

Answer 2

ngBindHtml worked for me. See more in the docs here: https://docs.angularjs.org/api/ng/directive/ngBindHtml

<div ng-bind-html="post.size_description"></div>