Tried many ways still not showing HTML content in ui-grid Angular

Question

In a real-life project, I'm trying to populate an Angular ui-grid using WebAPI to get JSON data has HTML content. So far, the column has HTML is either showing them as plain text or blank content.

Followed this still not getting it work: How to render html formatted content in ng-grid?

Here are my code: Index.html (script are downloaded to local)

<script type="text/javascript" src="/scripts/jquery-1.7.2.min.js"></script>
<script src="/scripts/angular-1.5.0.js"></script>
<script src="/scripts/angular-touch-1.5.0.js"></script>
<script src="/scripts/angular-animate-1.5.0.js"></script>
<script src="/scripts/angular-sanitize-1.5.0.min.js"></script>
<script src="/scripts/angular-bind-html-compile.js"></script>
<script src="/scripts/csv.js"></script> <!-- 2013 -->
<script src="/scripts/pdfmake.js"></script>
<script src="/scripts/vfs_fonts.js"></script>
<script src="/scripts/ui-grid.min.js"></script> <!-- v3.2.9-->
<link rel="stylesheet" type="text/css" href="/content/ui-grid.css"/><!-- v3.2.9 - 2016-09-21-->
<script src="/scripts/myAngular.js"></script>
<div ng-controller="getHomeMsg">
<div id="grid1" ui-grid="grdAngHomeMsg" class="Agrid"></div>
</div>

myAngular.js

var myApp = angular.module('app', ['ngTouch', 'ui.grid', 'ngSanitize', 'angular-bind-html-compile']);

myApp.controller('getHomeMsg', function($scope, $http, $sce)      // prefix function() with ['$scope', '$http', '$sce', ... got the same result
{
    $scope.grdAngHomeMsg = {};
    $scope.grdAngHomeMsg.columnDefs = [
        {
            name: 'Subject',
            cellTemplate: '<div class="ui-grid-cell-contents" bind-html-compile="COL_FIELD"></div>'                      //'<div ng-bind-html="row.entity[col.field]"></div>'
        },
        {
            name: 'Message'
        },
    ];
    var msgData;
    $http(
        {
            method: 'GET',
            url: '/API/HomeMsg',
            responseType: 'json'
        }).then(function successCallback(response) {
            msgData = $scope.grdAngHomeMsg.data = response.data;
            $scope.grdAngHomeMsg.data.forEach(function (d) {
                $sce.trustAsHtml(d.Subject); // F12 shows d.Subject has value and valid!
            });
        }, function errorCallback(response, statusText) {
            alert(statusText);
        });
// also tried replacing this cellTemplate bind-html-compile="COL_FIELD" with ng-bind-html="AA(COL_FIELD)", F12 shows this function is never called
    $scope.AA = function (htm) {
        return $sc.trustAsHtml(htm);
    };

    // it never reach here after actual API call
    //msgData.forEach(function (d) {
    //    $sce.trustAsHtml(d.Subject);
    //})

}
);

• Browser = FireFox v50.1.

• F12 verified data returned are in perfect JSON format.

• F12 shows no error during execution, all scripts are loaded, $sce object is instantiated w/ properties including trustAsHtml method.

Other articles/examples tried including:

How do you use $sce.trustAsHtml(string) to replicate ng-bind-html-unsafe in Angular 1.2+

https://github.com/angular-ui/ui-grid/issues/1292

Spent two full days, appreciate any help!