JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.angularjs.org/1.3.6/angular.min.js"></script>
<body ng-app="myApp">
    <div ng-controller="MyCtrl">
        <signature data="signatureData"></signature>
        <button ng-click="changeData()">Change data!</button>
    </div>
</body>

JavaScript

console.clear();

angular.module("myApp", [])
.controller("MyCtrl", ["$scope", function ($scope) {
    $scope.changeData = function() {
        console.log("Outside directive:", $scope.signatureData);
        $scope.signatureData = "hello";
    };
}])
.directive("signature", [function() {
    var directiveDefinitionObject = {
        template: "<div>Don't mind me, I'm just a template...</div>",
        scope: {
            data: "="
        },
        controller: ["$scope", "$element", function($scope, $element) {
            $scope.data = "ciao";
            $scope.$watch("data", function(d) {
                console.log("Inside directive:", d);
            });
        }]
    };
    return directiveDefinitionObject;
}]);