`md-highlight-text` not working together with `ng-bind-html`

Question

ngSanitize dependency is not working with ngMaterial dependancy when declaring the app

I have declared the module as:

var myApp = angular.module('myApp', ['ngTable', 'ngSanitize', 'ngMaterial', 'angularjs-dropdown-multiselect']);

I don't get any error on my console but the HTML rendered is (sensitive data hidden):

enter image description here

The HTML is:

<td   data-title="'Title'" sortable="'CMPTitle'"
      ng-bind-html="item.CMPTitle"
      md-highlight-text="searchText" md-highlight-flags="i">
    <a ng-show="item.CMPId != ''" ng-click="OpenCMPItem(item.CMPId)"
       style="cursor:pointer">
        {{item.CMPTitle}}
    </a>
</td>

<td data-title="'Description'" sortable="'CMP_Submit_Description'"
    md-highlight-text="searchText"
    md-highlight-flags="i" ng-bind-html="item.CMP_Submit_Description">
  {{item.CMP_Submit_Description}}
</td>

In this the ngSanitize is not working and all the html tags are visible on the UI. ngMaterial's md-highlight-text does not seem to work as well.

But when I remove ngMaterial,

var myApp = angular.module('myApp', ['ngTable', 'ngSanitize','angularjs-dropdown-multiselect']);

I am getting properly sanitized data and links on the page.

The version used for all the files is same - 1.7.6.

The ordering of scripts in the HTML are (though I've tried a lot of re-arranging):

<script type="text/javascript" src="../SiteAssets/JS/angular.min.js"></script>
<script type="text/javascript" src="../SiteAssets/JS/angular-sanitize.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-messages.min.js"></script>
<script type="text/javascript" src="../SiteAssets/JS/angular-material.min.js"></script>

Answer 1

you are missing this part to show html as you need

instead of

{{item.CMPTitle}}

write

<label ng-bind-html="item.CMPTitle"></label>