JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div ng-app="myapp" ng-controller="MyCtrl">
        hey
        <listie items="items"></listie>
        This does not work. why?
        <lw items="items"></lw>
        
    </div>
</body>

JavaScript

var app = angular.module('myapp', []);

app.directive("listie", function(){
    return {
        restrict: 'E',
        replace: true,
        scope: {
            items: "="
        },
        template: '<div><span ng-repeat="i in items">{{i.label}}</span></div>',
        controller: function($scope) {
        }
    }
});

app.directive('lw', function(){
    return {
        restrict: 'E',
        scope: {
            items: "="
        },
        template: '<listie items="items"></listie>',
        controller: function($scope) {
        }
    }
});

function MyCtrl($scope){
    var a = {label: 'A'};
    var b = {label: 'B'};
    var c = {label: 'C'};
    $scope.items = [a, b, c];
}