JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp" >
  <div ng-controller="myController">
    <directive name="name1"></directive>
    <directive name="name2"></directive>
    <button type="button" ng-click="name1.getArr()">
      Name 1 click
    </button>
  </div>
    
</div>

JavaScript

angular.module('myApp', [])
.controller("myController", function($scope) {
	$scope.name1 = {
  	val: "val1"
  };
  $scope.name2 = {
  	val: "val2"
  };
})
.directive('directive', function () {
    return {
        restrict: 'E',
        scope: {name: '='},
        template: '{{foo.name}}',
        controller: ctrl,
        controllerAs: 'foo'
    }
});

function ctrl($scope) {
    this.name = $scope.name.val;
    
    this.arr = [];
    this.name.getArr = function() {
    	alert("test");
    	return arr;
    };
}