Ng-Bind-Html-6

In this example, We are going to create an anchor , an image and span text from angular object.
Here is the html

{{ex.msg}}

See the output:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-sanitize.js"></script>
    <style>
        .showTags {
            border: 1px solid black;
            padding: 5px;
            width: 150px;
            border-radius: 3px;
            color: tomato;
            text-align: center;
        }

            .showTags span {
                font-size: 12px;
                color: blue;
            }
    </style>
</head>
<body ng-app="myApp">
    <div ng-controller="myController">
        <div class="showTags" ng-repeat="ex in examples">
            <div ng-bind-html="ex.name"></div>
            <span>{{ex.msg}}</span>
        </div>
    </div>
    <script>
        var app = angular.module("myApp", ['ngSanitize']);
        app.controller('myController', ['$scope', function ($scope) {
            $scope.examples = [{
                name: "<a href='http://learnit.visrosoftware.com/'>LeartIt</a>",
                msg: "this is an anchor tag"
            }, {
                name: "<img src='http://learnkode.com/assets/img/logo_red.png'/>",
                msg: "this is an image tag"
            }, {
                name: "Welcome to the world of AngularJS!",
                msg: "this is just plain text"
            }];
        }]);
    </script>
</body>
</html>

Output