JSFiddle - React, Tailwind, and code Playground

by Pradeep Shankar

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

  <div ng-repeat="x in myList">
    <p bind-html-compile="x.html">
   {{x.html}}
    </p>
  </div>

</div>

JavaScript

var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope, $sce) {
  $scope.myList = [{
    id: 1,
    html: "<a href='#' ng-click='someFunction(x.id)'>Test1</a>"
  }, {
    id: 2,
    html: "<a href='#' ng-click='someFunction(x.id)'>Test2</a>"
  }];
  
  $scope.someFunction = function(id) {
    alert(id);
  };
});

app.directive('bindHtmlCompile', function($compile) {
    return {
      restrict: "A",
      scope: {
        bindHtmlCompile: "="
      },
      link: function(scope, elem) {
        scope.$watch("bindHtmlCompile", function(newVal) {
          elem.html('');
          var newElem = angular.element(newVal);
          var compileNewElem = $compile(newElem)(scope.$parent);
          elem.append(compileNewElem);
        });
      }
    };
  });