How to Render HTML Value in Ng-repeat in AngularJS?

By Hardik Savani June 22, 2023 Category : jQuery Angular

I always post small example of AngularJS function, In this example we learn how to render our HTML code in ng-repeat using trustashtml filter.

Sometimes we have array or object of records with html values, at that time we require to use ng-repeat, But we can't simple way render html code, we should require to use trustashtml or ng-bind-html-unsafe etc. So in this example i created one filter for this task using sce trustashtml. filter as like bellow you can see code of that filter using $sce.trustAsHtml.


app.filter('trustAsHtml',['$sce', function($sce) {

return function(text) {

return $sce.trustAsHtml(text);



I will give you full example of render html code in ng-repeat using bellow angular filter, so let's see bellow example:


<!DOCTYPE html>



<title>AngularJS - How to render HTML value in ng-repeat ?</title>

<script type="text/javascript" src="//"></script>

<script src=""></script>



<div class="container" ng-app="mainApp" ng-controller="myController" id="mainController">


<li ng-repeat="item in data">

{{ item.title }}


<div ng-bind-html="item.description|trustAsHtml">





<script type="text/javascript">

var app = angular.module("mainApp", []);

app.controller('myController', function($scope, $timeout) {

$ = [

{title:'Title 1', description:'<h1>Test for it</h1>'},

{title:'Title 2', description:'<strong>Here is bold</strong>'},

{title:'Title 3', description:'It is normal'},



app.filter('trustAsHtml',['$sce', function($sce) {

return function(text) {

return $sce.trustAsHtml(text);






I hope it can help you...