JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<div ng-app = "TabsApp">
	<div ng-controller="IndexCtrl">
		<collection collection='tasks'></collection>
	</div><a ng-click='tse = !tse'>tse</a> <div ng-show='tse'>testing</div> 
</div>

CSS

.btn{
  
  cursor:pointer;background:blue;color:white;
}

JavaScript

var TabsApp = angular.module('TabsApp', []);
TabsApp.directive('bindHtmlUnsafe', function( $parse, $compile ) {
    return function( $scope, $element, $attrs ) {
        var compile = function( newHTML ) {
            newHTML = $compile(newHTML)($scope);
            $element.html('').append(newHTML);        
        };
        
        var htmlName = $attrs.bindHtmlUnsafe;
        
        $scope.$watch(htmlName, function( newHTML ) {
            if(!newHTML) return;
            compile(newHTML);
        });
   
    };
});
TabsApp.directive('collection', function () {
	return {
		restrict: "E",
		scope: {
			collection: '='
		},
		template: "<ul><member ng-repeat='member in collection' member='member'></member></ul>"
			 
	}
});

TabsApp.directive('member', function ($compile) {
	return {
		restrict: "E",
		scope: {
			member: '=',
      productDetails:'@',
      tse : '='
		},
		template: "<li>{{member.name}} <a ng-click='tse = !tse'>tse</a> <div ng-show='tse'>testing</div>  <button class = 'btn' ng-click='testfun(member.id,member.entityType)'>button</button> <div  bind-html-unsafe ='productDetails'  ng-if='displaypd'   id = 'test_{{member.id}}'    > </div>  </li>",
		//templateUrl: contextPath + '/angular/genericTemplate.jsp' ,
		link: function (scope, element, attrs) {
     scope.displaypd = false;
     scope.flag = false;
    scope.testfun = function(id,entityType){   
  		if(!scope.flag)scope.demoFun(id);
    };
    
     scope.demoFun = function(id){  
      scope.flag = true;
       //alert('demoFUN');
           var response = "<div class = 'productdetails' >Product ID: {{productId}} </div>"
      debugger;       
      scope.productDetails = response;
      scope.productId = id;        
      scope.displaypd = !scope.displaypd;
      setTimeout(function(){  scope.flag = false; }, 100);
     };
    
			angular.forEach(scope.member, function(value, key) {
				if (angular.isArray(value)) {
					element.append("<collection...