JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.angularjs.org/1.3.0/angular.min.js"></script>
<div ng-app="mymodule">
    <div ng-controller="mycontroller">
        <div class="one" my-directive>
            <div class="two" my-dir ng-model="test"></div>
        </div>
    </div>
</div>

CSS

.one {
    width: 150px;
    height: 150px;
    padding: 15px;
    background-color: #bebebe;
}
.two {
    width: 50px;
    height: 50px;
    background-color: blue;
    cursor: pointer;
}

JavaScript

angular.module('mymoduletwo', [])
.directive('myDir', ['$compile', function($compile) {
    return {
        restrict: 'A',
        scope: {},
        require: '?ngModel',
        link: function(scope, element, attrs, ngModel) {
            element.bind('click', function() {
                console.log("Почему клик происходит 2 раза?");
                var div = angular.element('<div>' + ngModel.$viewValue + '</div>');
                element.append(div[0]);
                
                $compile(div)(scope); // в боди добавляется див с кучей других директив $compile - обязательный
            });
        }
    };
}]);

var app = angular.module('mymodule', ['mymoduletwo'])
.controller('mycontroller', ['$scope', function($scope) {
    $scope.test = 'test';
}])
.directive('myDirective', ['$compile', function($compile) {
    return {
        restrict: 'A',
        scope: true,
        link: function(scope, element, attrs) {
            $compile(element.contents())(scope); // $compile - обязателен
        }
    };
}]);