JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp" ng-controller="Ctrl1">
    <div>Controller: {{ crossTabs }}</div>
    <br>
     <h5>Directive Section below</h5>

    <cross-tab ng-repeat="crossTab in viewModel.crossTabs" cross-tab="crossTab" cross-tabs="viewModel.crossTabs"></cross-tab>
</div>

JavaScript

angular.module("myApp", [])
    .controller("Ctrl1", function ($scope) {
    $scope.viewModel = {
        crossTabs: [1, 2, 3, 4, 5]
    };
})
    .directive("crossTab", function () {
    return {
        restrict: "E",
        template: "<input type='text' ng-model='crossTab'/><button ng-click='changeLols()' id='clc'>change crossTabs</button>",
        scope: {
            crossTabs: '=',
            crossTab: '='
        },
        controller: function ($scope) {
            $scope.changeLols = function () {
                $scope.crossTabs = [3, 4, 5];
                $scope.crossTabs.push(6);
            };
        },
        link: function (scope, elem, attrs) {

        }
    };
});