Using Array.join('<br />')

Question

Is there any reason this is not working ? :

this.categoriesId = $rootScope.categoriesList.map(function(obj) {
  return obj.id;
}).join('<br />');
this.categoriesName = $rootScope.categoriesList.map(function(obj) {
  return obj.name;
}).join('<br />');

and in the view :

<b>Categories ID :</b><br/><br/>
{{h.categoriesId}}
<hr>
<b>Categories Name :</b><br/><br/>
{{h.categoriesName}}

There is no line breaks, the <br /> isn't interpreted.

How can I work around this ?

Answer 1

Because Angular escapes the HTML in your string before it inserts it into the DOM, in order to prevent XSS attacks.

Messy Fix

Use the ng-bind-html directive to insert the HTML as is.

<span ng-bind-html="h.categoriesName"></span>

Make sure to include the $sanitize service, and ng-bind-html will automatically sanitize your string to make sure it's safe within its context.

Clean Fix

Use ng-repeat to iterate over the list without needing to worry about inserting markup into your string.

<b>Categories Name :</b><br/><br/>
<span ng-repeat="name in categoriesList">
  {{name}}<br />
</span>

Answer 2

{{}} is only interpreted as text , not html

Use ng-repeat , there is no need to parse array to html