Динамически загружаемые директивы Angular Js остаются активными после очистки DOM

Question

У меня есть выпадающий список, который динамически загружает директиву. Когда я выбираю "option a", он загружает "директиву a", когда я выбираю "option b", он загружает "директиву b". Однако, когда загружается вторая директива и DOM перезаписывается новой, похоже, что angular продолжает действовать как на ту, которая была только что удалена, так и на новую.

Вот фрагмент из моего кода, чтобы вы могли видеть, что происходит.

    // change event on dropdown list
    function onSelection(e, args) {
        if (args) {
            ctl.build(args.type || "integer");
        }
    }


    /** build the relevant directive based on the type */
    function build(type) {
        type = type.toLowerCase();
        var directive = "<rep-"+type+"-control args='filter.args'></rep-"+type+"-control>";
        var control = $element.find("#control");

        // only compile the new control so we don't duplicate ng events on the outer directive
        control.html(directive);
        $compile(control.contents())($scope);
    }

Это просто подключается к событию изменения и запускает "build". Build принимает заданный аргумент (который является значением выбранной опции) и загружает директиву с тем же именем "<rep-option-control>", Он загружает его в определенный элемент DOM и компилирует этот элемент.

Директива A имеет ввод типа "текст", а директива B содержит ввод типа "номер". Если я сначала загружаю директиву B, а затем загружаю директиву A и вводю содержимое для ввода (type='text'), я получаю эту ошибку: https://docs.angularjs.org/error/ngModel/numfmt?p0=test в котором четко указано, что я пытаюсь ввести строковое содержимое для ввода числа.

Это означает, что хотя я бегу control.html(directive) а также $compile это, старая директива все еще активна.

Кто-нибудь знает, как я могу это остановить?