JQuery.html($sce.trustAsHtml("<br>loltest")) not working - angularjs

Question

Here're video examples of what's happening:
Without sanitizing,
https://i.lithi.io/6GLS.mp4
With Sanitizing
https://i.lithi.io/TVIu.mp4
When clicked, this is supposed to make the text above, render the full text.
To do this, I have created a function
$scope.loadMore = function($event)
{
var element = $($event.currentTarget);
//console.log(element.data('text'));
var text = $scope.toHtml(element.data('text'));//$compile(element.data('text'));
//$sce.trustAsHtml(element.data('text'))
console.log(text);
if (element.parent().find('#text_data').length) {
element.parent().find('#text_data').html(text);
} else {
/*element.parent().find('#text_data').html(
element.data('text').length > 100 ?
element.data('text').substring(0, 100)
:
element.data('text')
);*/
}
}
I'm calling this function with ng-click. Basically it gets the parent, and then selects the element with the text inside.
The button has a Data Attribution with the full length text (not limited to 100 chars).
When I sanitize it inputs blank text? Whereas if I don't sanitize, it inputs the text.
I don't know if it's the right way to actually do it, but I just replaced the
tag with \n in my PHP, now it doesn't render them. Since YouTube doesn't support other HTML, it should be fine.

Answer 1

This is because your HTML is encoded. You have to decode it like this before displaying.
//angular hack to html decode
let decoded = angular.element('<div />').html(data).text()
$scope.decodedData = $sce.trustAsHtml(decoded);
There is nothing like $scope.toHtml(data)
Fiddle: https://jsfiddle.net/codeandcloud/54mzkjqe/