JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="test" ng-controller="MainCtrl">
    <custom ng-repeat="item in items" ng-controller="ItemCtrl"></custom>
    <button ng-click="change(3)">change</button>
</div>

JavaScript

angular.module('test', [])
    .controller('MainCtrl', function($scope) {
        $scope.items = ['A', 'B', 'C', 'D'];
        
        $scope.change = function(idx) {
            // how do I call item_change() for the 3rd item?
        }
          $scope.item_change = function() {
            this.item = 'X';
        }
    })
    .controller('ItemCtrl', function($scope) {
      
    })
    .directive('custom', function() {
        return {
            restrict: 'E',
            template: '<div>{{item}}</div>',
            replace: true
        }
    });