$ compile не определен

Динамическое создание элементов с использованием angular.elements - AngularJS

Мне нужно создать элемент директивы с помощью angular. Но не повезло с использованием angular.element. Завершено с ошибкой $ compile is not defined. Любая помощь очень ценится.

текстовое поле-personal.html

<input ng-focus = "setIndex(field.id);field.focus()" id = "{{field.id}}"
       type = "{{field.type}}" name = "{{field.id}}" ng-model = "field.text"
       class = "login_input_personal {{field.selectedClass}} {{enabledCursor}} {{field.text == '' ? 'blank' : ''}}"
       ng-mouseup = "clearSelected(field.id);"
       ng-mousedown = "startDrag(field.id);" />
<div class = "placeholder" ng-show = "field.text == ''"
  {{interfaceLabels[field.defaultText]}}
</div>
<div class = "placeholder" ng-show = "field.text == ''"></div>
<a class = "clear-textfield" ng-click = "clearTextField();"
   ng-if = "emailTextfieldClearButton"
   ng-show = "field.text != '' && field.selectedClass != ''">
</a>

А это мой

textField.js

angular
.module("textBoxUi")
.directive("textFieldPersonal", ['$rootScope', function($rootScope) {
    return {
        restrict : 'E',
        templateUrl : 'components/text-field-personal.html',
        scope : {
         field : " = "
        },

        link : function (scope, element, attr) {
            scope.interfaceLabels = scope.$parent.interfaceLabels;
            scope.emailTextfieldClearButton = $rootScope.emailTextfieldClearButton;
            scope.enabledCursor = $rootScope.enabledCursor;
            scope.setIndex= function(id){
                $rootScope.textFieldIndex = document.getElementById(id).selectionStart;
            };
            scope.startDrag = function(e){
                var e = window.event;
                scope.startDragX = e.pageX;
                e = null;
            };
            scope.clearSelected = function(id){
                var e = window.event;
                scope.stopDragX = e.pageX;
                if (scope.stopDragX > scope.startDragX){
                    document.getElementById(id).setSelectionRange(document.getElementById(id).selectionEnd, document.getElementById(id).selectionEnd);
                    $rootScope.textFieldIndex = document.getElementById(id).selectionEnd;
                }else {
                    document.getElementById(id).setSelectionRange(document.getElementById(id).selectionStart, document.getElementById(id).selectionStart);
                    $rootScope.textFieldIndex = document.getElementById(id).selectionStart;
                }
                e = null;
            };
            scope.clearTextField = function(){
                $rootScope.targetField.text  = "";
                $rootScope.hideEmailExtensionTop();
                document.getElementById($rootScope.targetField.id).value = $rootScope.targetField.text;
                if (typeof(scope.field.callback) === "function"){
                    scope.field.callback();
                }
            };

            scope.enabledCursorWatch = $rootScope.$watch('enabledCursor', function(){
                scope.enabledCursor = $rootScope.enabledCursor;
            });

        }
    }
}]);

В моем index.html я бы использовал свою директиву, как показано ниже

<text-field-personal> </text-field-personal>

Но я хотел бы создать то же самое в элементах Javascript DOM. Пытался сделать следующее, но безуспешно.

  var divv = document.createElement("div");
  var newDirective = angular.element("<input ng-focus='setIndex(field.id);field.focus()' id='{{field.id}}' type='{{field.type}}' name='{{field.id}}' ng-model='field.text' class='login_input_new {{field.selectedClass}} {{enabledCursor}} {{field.text == '' ? 'blank' : ''}}' ng-mouseup='clearSelected(field.id);' ng-mousedown='startDrag(field.id);'/><a class='clear-textfield' ng-click='clearTextField();' ng-if='emailTextfieldClearButton' ng-show='field.text != '' && field.selectedClass != '''></a>");
  divv.append(newDirective);
  $compile(newDirective)($scope);