JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myapp" ng-controller="SimpleCtrl">
    <div ng-spreadsheet curpart="part.curpart"></div>
    <button ng-click="increasePart()">Increase Curpart</button>
</div>

JavaScript

console.log("starting");
var mod = angular.module("myapp", []);

mod.controller("SimpleCtrl", function ($scope) {
    var part = {};
    part.curpart = 1;
    
    $scope.part = part;
    
    $scope.increasePart = function () {
         part.curpart++;   
    }
});

var SpreadsheetController = function () {
    console.log("Instantiating SpreadsheetController");    
}

SpreadsheetController.prototype.curPartChanged = function () {
    console.log('curPartChanged');
}

mod.directive("ngSpreadsheet", function ($window) {
    return {
        restrict: 'EA',
        scope: {
            curpart: '='
        },
        require: "ngSpreadsheet",
        template: '<div id="dataTable" class="dataTable"></div>',
        controller: SpreadsheetController,
        link: function (scope, element, attrs, ctrl) { 
            scope.$watch('curpart', function (val) {
                console.log('curpart value changed, new value is: ' + val);
                ctrl.curPartChanged();
              });
          }
    }
});