JSFiddle - React, Tailwind, and code Playground

HTML

<body ng-app="testApp" ng-controller="TestController">
        <p>
            outside directive
        </p>
        <input type="text" name="name" ng-model="obj.value">
        <p>
            value: {{obj.value}}
        </p>
        <test value="obj.value" set-value="setValue"></test>
    </body>

CSS

.test {
    height: 150px;
    width: 150px;
    background-color: orange;
}

JavaScript

angular.module('testApp', [])

.controller('TestController', ['$scope', function ($scope) {
    $scope.obj = {
        value: 'initial value'
    };
    $scope.setValue = function (val) {
        $scope.obj.value = val;
    };
}])

.directive('test', ['$document', function ($document) {
    return {
        restrict: 'E',
        scope: {
            value: '=',
            setValue: '='
        },
        template: '<div class="test">inside directive<br>value: {{value}}</div>',
        link: function (scope, element, attrs) {
            $document.on('mousemove', function (event) {
                scope.setValue(event.pageX + ' : ' + event.pageY);
            });
        }
    };
}]);