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 ?

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 ?

• javascript
• html
• arrays
• angularjs
• string-formatting

• you mean that <br /> is displayed as text ? – Hacketo Commented Feb 22, 2016 at 14:00
• 1 I'll suggest you to use ng-repeat directive – Tushar Commented Feb 22, 2016 at 14:02
• Possible duplicate of AngularJS : Insert HTML into view – Hacketo Commented Feb 22, 2016 at 14:02

3 Answers 3

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>

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

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

Try this way:

<b>Categories Name :</b><br/><br/>
<span ng-bind-html="h.categoriesName"><span>

Or create map and join filter:

app
.filter('map', function () {
    return function (arr, prop) {
        return arr.map(function (item) {
            return item[prop];
        });
    };
})
.filter('join', function () {
    return function (arr, sep) {
        return arr.join(sep);
    };
});

HTML:

<span ng-bind-html="categoriesList | map: 'name' | join '<br/>'"><span>