HTML data get from $http GET is not showing properly in Angular.js

Issue

I have defined a controller like this:

app.controller("home", function ($scope, $http, $common) {
    $http({
        method: "GET",
        url: '/posts/loadData'
    }).then(function (response) {
        //console.clear()
        if (typeof response.data.posts != 'undefined') {
            console.log(response.data.posts);
            $scope.posts = $common.arrangePosts(response.data.posts);
        }
    });
})

and a service to arrange data:

app.service('$common', function ($timeout, $sce, $httpParamSerializerJQLike) {
    var that = this;
    this.arrangePosts = function (rawPosts) {
        var posts = [];
        
        $.each(rawPosts, function (key, value) {
            posts.push({
                          postId: value.postId, 
                          postLink: '/post/' + that.cleanString(value.title) + '/' + value.postId, 
                          title: value.title, 
                          summary: $sce.trustAsHtml(value.summary)
                       });
        });

        return posts;
    }
});

using values in HTML like this:

<div class="widget fullwidth post-single">
        <h4 class="widget-title">Latest</h4>
        <div class="widget-content">
            <ul>
                <li ng-repeat="post in posts">
                    <h4 class="list-title"><a href="{{post.postLink}}">{{post.title}}</a></h4>
                    {{post.summary}}
                </li>
            </ul>
        </div>
    </div>

Data coming from server in JSON form:

Object { postId="4",  title="asdf",  summary="<p>asdf</p>"}

but all the HTML tags are printing on my page as it is (like a text) in summary.

In many SO posts people suggested to use $sce.trustAsHtml but it's not working for me. What can I try next?

Solution

have you tried this?

<div ng-bind-html='post.summary'></div>

Answered By - Hamed Mahdizadeh