html bind 2

by Harsha Jayamanna

HTML

<script src=" https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.4.7/angular-sanitize.js"></script>
<div ng-app="sample">
  <div ng-controller="materialController">
  {{expression1}}
  
  <div ng-bind-html= "expression1" >
  
  </div>
  
  
  </div>
</div>

CSS

body {
  font-family: Arial;
}

JavaScript

var app = angular.module('sample', ['ngSanitize']);
app.controller('materialController', function($scope,$sce) {
  $scope.materials = [];
  $scope.name = "<u>underline</u>";
  $scope.expression = "<i>italic</i>";
  $scope.expression1 = $sce.trustAsHtml("<i onclick='alert(1);'><button>click this</button></i>");
  
});

app.filter('unsafe', ['$sce', function ($sce) {
        return function (text) {
            return $sce.trustAsHtml(text);
        };
    }])