How to show HTML with AngularJS from JSON string

Question

I am struggling to display HTML code from JSON string. You can see HTML tags in address. Is there any way I can properly display it?

My template is:

<div ng-app ng-controller="jsonp_example">
    <ul ng-repeat="item in data">
        <li>{{item.ID}}</li>
        <li>{{item.post_title}}</li>
        <li ng-bind-html-unsafe="getContent(obj)">{{item.custom_fields.sponsor_address}}</li>
        <li>
            <img src="{{item.custom_fields.sponsor_logo}}" width="100">
            <ul>
                <li>
                   <hr>
                </li>
            </ul>
        </li>
    </ul>
</div>

And script:

function jsonp_example($scope, $http) {
    $scope.getContent = function (obj) {
        return obj.custom_fields.sponsor_address
    };

    var url = "https://eventident.com/api/getposts/?auth_key=s2mEus39R296M5F6n343A3dh9c62f7cm&custom_post=sponsors&callback=JSON_CALLBACK";

    $http.jsonp(url).success(function (data) {
        $scope.data = data.result;
    });
}

Please feel free to amend my jsfiddle: http://jsfiddle.net/1295z4bc/

Answer 1

Did you include angular-sanitize.js as a dependency ? (as a script and as angular module dependency)

Also, you don't need to {{}} with ng-bind-html, just

<li ng-bind-html="item.custom_fields.sponsor_address"></li>

will do.