JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="demoApp">  
  <div ng-controller="demoCtrl">
      <my-items items="members"></my-items>
  </div>
</div>

JavaScript

var app = angular.module('demoApp', []);
    
app.controller('demoCtrl', function($scope, $timeout) {
    $scope.members = [{name:'me', color:'blue'},
                      {name:'you', color:'red'},
                      {name:'dark green shoe', color:'green'}];
    $timeout(function() {
        $scope.members[2] = {name:'orange shoe', color:'orange'};
    }, 1500);
});

app.directive('myItems', function() {
    console.log('myItems');
    return {
        scope:{items:"="},
        restrict:"E",
        template:"<div my-item1 ng-repeat='item in items'></div>" +
                 "<hr/>" +
                 "<div my-item2 ng-repeat='item in items'></div>"
    };
});

app.directive('myItem1', function() {
    console.log('myItem1');
    return {
        restrict:"A",
        template:"<div ng-style='{color:item.color}'>myItem1: {{item.name}}</div>",
        replace:true
    };
});

app.directive('myItem2', function($compile) {
    console.log('myItem2');
    return {
        restrict:"A",
        //template:"<div ng-style='{color:item.color}'>myItem2: {{item.name}}</div>",
        //replace:true,
        compile: function(element) {
            console.log('myItem2.compile');
            element.removeAttr('my-item2');
            element.removeAttr('ng-repeat');
            element.text('myItem2: {{item.name}}');
            element.attr('ng-style', '{color:item.color}');    // Why does ng-style not apply?
            
            
            return function link(scope, elem, attr) {
                var compileElement = $compile(elem);
                compileElement(scope);    // Why does binding work even without this statement?
                console.log('myItem2.link');
            };
        }
    };
});