HTML entities get encoded twice with dynamic binding

Question

how do id encode/decode html in ionic framework below is my code.

<ion-view view-title="Products">
<ion-content class="padding">
    <div class="list">
        <div class="card" ng-repeat="item in products">
            <a class="item item-avatar" on-tap="productDetails(item.ProductId)">
                <h2>{{item.Name}}</h2>
                <p>Price {{item.Prices[0].Value}}</p>
                <p>{{item.Description}}</p>
            </a>
            <a class="item item-image" on-tap="productDetails(item.ProductId)">
                <img ng-src="{{item.ImageUrl}}"/>
            </a>
            <!--<div class="item item-icon-left energized" >-->
                <div class="button-bar">
                    <div class="button button-clear energized" ng-click='addToCart(item.ProductId);' style="font-size:80%;">
                        <i class="icon ion-ios-cart"></i>
                        Add To cart
                    </div>
                    <div class="button button-clear energized" on-tap="productDetails(item.ProductId)" style="font-size:80%;">
                        <i class="icon ion-eye"></i>
                        View More
                    </div>
                </div>
            <!--</div> -->
        </div>
    </div>
</ion-content>

when I tried to fatch my record from product and it is encoding therefore browser is showing like the below image

And the value store in salesforce product2 object is

  "Pacifique - Bora Bora Pearl Beach Resort & Spa - Polynésie française"

Answer 1

Use

<h2 ng-bind-html-unsafe="item.Name"></h2>

The documentation can be found here

There is a working plunkr -> http://plnkr.co/edit/dOzvvNcaLjd9CsKzyIY0?p=preview