Angular Create a directive inside the directive. Where is my stuff?

Question

I am trying to create several directives expressionSelectinside my directive expressionAuthoring, in this case, with a simple click. I can get a template expressionSelect, but none of my materials for the area will go with it. I searched and saw various examples / similar problems, but none of which I was able to directly pull out the solution and make myself work. Ideas?

I do not use a controller outside of what is shown here

app.directive('expressionAuthoring', ['$compile', function (compile) {
    return {
        restrict: 'E',
        template: '<div></div>',
        link: function (scope, element, attrs) {

            element.bind('click', function () {
                var selection = angular.element(document.createElement('expression-select'));
                var el = compile(selection)(scope);
                element.append(el);
            });
        }
    };
}]);

app.directive('expressionSelect', [ function () {
    return {
        restrict: 'E',
        template: '<select ng-model="expressionSelect" ng-options="e.name for e in expressionSelect"></select>',
        link: function (scope, element, attrs) {

            scope.expressionSelect = [
                { name: 'TestName1', value: 'TestValue1' },
                { name: 'TestName2', value: 'TestValue2' },
                { name: 'TestName3', value: 'TestValue3' }
            ];
        }
    };
}]);

When I just put <expression-select></expression-select>somewhere in my html

---

When I generate it in my "parent" directive

Answer 1

, , , scope.$apply();

element.bind('click', function () {
    var selection = angular.element(document.createElement('expression-select'));
    var el = compile(selection)(scope);
    scope.$apply();
    element.append(el);
});