demonstrating ng-bind-html-unsafe in angular

by Suvi Vignarajah

HTML

<div ng-controller="ExampleCtrl" ng-app>
    <div class="showDiffTags" ng-repeat="ex in examples">
        <div ng-bind-html-unsafe="ex.name"></div>
        <span>{{ex.snippet}}</span>
    </div>
</div>

CSS

.showDiffTags {
    border: 1px solid black;
    padding:5px;
    width:150px;
}
.showDiffTags div{
    margin-bottom:5px;
}
.showDiffTags span{
    font-size: 12px;
    color:#333;
}

JavaScript

function ExampleCtrl($scope) {
    $scope.examples = [{
        "name": "<a href='http://www.google.ca'>Nexus S</a>",
            "snippet": "this one has an anchor tag"
    }, {
        "name": "<img src='http://www.w3schools.com/tags/smiley.gif' title='image tag example' />",
            "snippet": "this one has an image tag"
    }, {
        "name": "Just regular text",
            "snippet": "this is just plain ol' text"
    }];
}