JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myModule">
    <to-do-app></to-do-app>
</div>

<script type="text/ng-template" id="toDoList">
    <ul>
        <li ng-repeat="item in items">{{item}}</li>
    </ul>
</script>

<script type="text/ng-template" id="toDoApp">
    <div>
        <h3>TODO</h3>
        <to-do-list items="items"></to-do-list>
        <form>
            <input ng-model="text" />
            <button ng-click="add()">Add #{{items.length + 1}}</button>
        </form>
    </div>
</script>

JavaScript

angular.module('myModule', [])
    .directive('toDoList', function() {
        return {
            restrict: 'E',
            replace: true,
            template: document.getElementById('toDoList').innerHTML,
            scope: { items: '=' }
        };
    })
    .directive('toDoApp', function() {
        return {
            restrict: 'E',
            replace: true,
            template: document.getElementById('toDoApp').innerHTML,
            controller: function($scope) {
                $scope.items = [];
                
                $scope.add = function() {
                    $scope.items.push($scope.text);
                    $scope.text = '';
                    
                }
            }
        };
    });