JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<script type="text/ng-template" id="item.html">
    <li>{{data}}</li>
</script>
<table ng-controller="controller">
    <tr><td><button ng-click="add()">add</button></td></tr>
    <tr>
        <td>
            <ul>
                <item-1 ng-repeat="item in items" data="item"></item-1>
            </ul>
        </td>
        <td>
            <ul>
                <item-2 ng-repeat="item in items" data="item"></item-2>
            </ul>
        </td>
        <td>
            <ul>
                <li ng-repeat="item in items"><item-3  data="item"></item-3></li>
            </ul>
        </td>
    </tr>
</table>

CSS

table{
    width:100%;
}
td{
    width:33%;
}

JavaScript

angular.module('app',[]).controller('controller', function($scope){
    
    $scope.items = [1,2,3,4,5,6,7,8,9];
    $scope.add = function(){
        
        $scope.items.push($scope.items[$scope.items.length - 1]+1);
        
    }

}).directive('item1', function(){
    return{
        restrict:'E',
        replace:true,
        scope: {
            data: '=data'
        },
        template:'<li>{{data}}</li>'
    }
}).directive('item2', function(){
    return{
        restrict:'E',
        replace:true,
        scope: {
            data: '=data'
        },
        templateUrl:'item.html'
    }
}).directive('item3', function(){
    return{
        restrict:'E',
        replace:true,
        scope: {
            data: '=data'
        },
        templateUrl:'https://s3.amazonaws.com/thedigitalself-public/jsfiddle-EaRHD-template.html'
    }
});