Decode HTML entities with Angular filter

Question

I am trying to decode html entities from a string using and Angular JS filter.

I have a view that looks like the following:

<div class="roboto medium-gray">
   <span class="item-description">{{item.description | plaintext}}</span>
</div>

As of right now I am applying a filter that strips tags:

.filter('plaintext', function() {
  return function(text) {
    return text ? String(text).replace(/<[^>]+>/gm, '') : '';
  };
})

I am trying to determine a way where i can decode any html enties that are in there.

item.description is "A large house with wrap around porch & pool"

right now after item.description gets passed through the plaintext filter it comes out as:

A large house with wrap around porch & pool

I want it to replace the & with &

Thank you for help in advance.

Answer 1

You can use ng-bind-html , like so:

<div class="roboto medium-gray">
   <span class="item-description" ng-bind-html="item.description | plaintext"></span>
</div>

For more information see official API Reference .