How can I fix the slot ng-repeat so it will display the areas for the selected block?

I am trying to display the areas for the selected block, the wizardStep is the parent controller and the optionSelector is the child controller. I am sending the selected name and value of the selected option to the parent controller so we can then display the content of that selected option. However, the slot ng-repeat in the wizard step html is not displaying the block. how can we fix this?

optionSelector.controller.js

angular.module("umbraco").controller("optionSelectorController", function ($scope, selectionService) {
    var vm = this;
    vm.propertyEditorForm = $scope.propertyForm;
    vm.blockEditorApi = $scope.blockEditorApi;
    vm.depth = $scope.depth || 0;
    vm.model = $scope.model;
    vm.block = vm.model.block;

    vm.select = function (block) {
        console.log("Selected Option:", block);

        selectionService.setSelected({
            fieldName: vm.block.data.fieldName,
            fieldValue: block.$block.data.fieldValue
        });
    };
});

optionSelector.html

<div class="option-selector" ng-controller="optionSelectorController as vm">
    <div class="options">
        <div ng-repeat="area in vm.block.layout.areas" style="display: flex;">
            <div ng-repeat="block in area.items">
                <div class="option-item">
                    <h5 ng-bind="block.$block.data.title"></h5>
                    <p ng-bind-html="block.$block.data.description.markup"></p>

                    <div class="option-footer">
                        <button class="btn btn-primary"
                                ng-click="vm.select(block)"
                                ng-class="{ 'selected': vm.selectedOptionKey === block.$block.key }">
                            <span ng-if="vm.selectedOptionKey === block.$block.key">Selected</span>
                            <span ng-if="vm.selectedOptionKey !== block.$block.key">Select</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .options {
        border-top: 3rem solid aqua;
        width: 100%;
    }

    .option-selector {
        display: flex;
        flex-direction: row;
    }

    .umb-block-grid__layout-container {
        display: flex !important;
    }
</style>

wizardStep.controller.js:

angular.module("umbraco").controller("wizardStepController", function ($scope, selectionService, blockEditorService) {
    var vm = this;
    vm.model = $scope.model;
    vm.block = vm.model.block;

    vm.title = vm.block.data.title;
    vm.description = vm.block.data.description;
    vm.additionalInfo = vm.block.data.additionalInfo;

    vm.propertyEditorForm = null;
    vm.blockEditorApi = null;
    vm.layoutColumns = 12;
    vm.depth = 0;

    function circularReplacer(obj) {
        let seen = new WeakSet();
        return function (key, value) {
            if (typeof value === "object" && value !== null) {
                if (seen.has(value)) return "[Circular]";
                seen.add(value);
            }
            return value;
        };
    }

    selectionService.onSelect(function (data) {
        console.log("Received selected option:", data);

        const { fieldName, fieldValue } = data;
        vm.selectedBlock = null;

        for (const outerArea of vm.block.layout.areas || []) {
            for (const parentItem of outerArea.items || []) {
                const parentBlock = parentItem.$block;

                if (!parentBlock?.data?.fieldName) continue;

                for (const innerArea of parentBlock.layout.areas || []) {
                    for (const childItem of innerArea.items || []) {
                        const childBlock = childItem.$block;
                        const childValue = childBlock?.data?.fieldValue;

                        if (parentBlock.data.fieldName === fieldName && childValue === fieldValue) {
                            vm.selectedBlock = childBlock;

                            console.log("Selected block layout:", vm.selectedBlock.layout);
                            $scope.$applyAsync();
                            vm.selectedTitle = childBlock.data.title;
                            vm.selectedDescription = childBlock.data.description;
                            vm.fieldValue = childValue;
                            break;
                        }
                    }
                    if (vm.selectedBlock) break;
                }

                if (vm.selectedBlock) break;
            }
            if (vm.selectedBlock) break;
        }

        console.log("Matched block:", JSON.stringify(vm.selectedBlock, circularReplacer(vm.selectedBlock)));
    });
});

wizardStep.html

<div ng-controller="wizardStepController as vm">
    <div class="wizard-step">
        <div class="wizard-step__header">
            <h2 ng-bind="vm.title"></h2>
            <p ng-bind-html="vm.description.markup"></p>
            <div ng-bind="vm.additionalInfo"></div>
        </div>

        <div class="wizard-step__content">
            <slot ng-repeat="area in vm.block.layout.areas"
                  name="{{area.$config.alias}}"
                  block-editor-api="vm.blockEditorApi"
                  property-editor-form="vm.propertyEditorForm">
            </slot>
        </div>
    </div>

    <div class="selected-info" ng-if="vm.selectedBlock.layout.areas.length">
        <slot ng-repeat="area in vm.selectedBlock.layout.areas track by area.key"
              name="{{area.$config.alias}}">
        </slot>
    </div>
</div>

<slot name="test"></slot>

<style>
    .wizard-step__content {
        box-sizing: border-box;
    }
</style>