JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="testApp">
    <div ng-controller="TestCtrl as ctrl">Name: {{ctrl.name}} -
        <button update-directive>Change</button>
    </div>
</div>

JavaScript

angular.module('testApp', [])
    .controller('TestCtrl', TestCtrl)
    .directive('updateDirective', updateDirective)


function TestCtrl() {
    var vm = this;
    vm.name = 'Rob'

    vm.updateName = function (new_name) {
        vm.name = new_name;
    }
}

function updateDirective() {
    var directive = {
        link: link,
        restrict: 'A'
    }

    return directive;

    function link(scope, element, attr) {
        element.on('click', function () {
            console.log('trying to change...');
            scope.$apply(scope.ctrl.updateName('baban'));
        });
    }
}