分离对象中的Ng重复（语义UI模态）

Question

我正在尝试从语义UI库（http://semantic-ui.com/modules/modal.html）获取Modal组件以在我的网站上运行。但问题是，要使模式正常工作并正确显示，它会从DOM中分离出来，如文档中所述：

  

模式可以包含在页面的任何位置。在初始化时，模式的当前大小将被缓存，元素将从dom中分离并移动到调光器内。

这会导致模态内容中的ng-repeat中断，当你想到它时，它就显而易见了。 ng-repeat无法访问DOM的控制器，因为父元素已与DOM分离。

我需要找到一种能够在模态组件中渲染ng-repeat的方法，并且仍然像现在一样保持其功能。有一个设置可以将detachable属性更改为false，但这会导致模态显示不正确，并且会影响页面的设计。

我真的希望有一些解决方案，因为我真的很困惑该怎么做。

是否可以为模态组件本身创建单独的控制器？它会保持联系吗？如果是这样，我怎么能在页面的主控制器和小模态控制器之间进行通信？

以下是我当前模态的代码 整个块都与DOM分离。

<div class="ui modal">
    <i class="close icon"></i>
    <div class="header">
        Choose profile picture
    </div>
    <div class="content">
            <div class="ui segment">
                <h4 class="header">Choose a default</h4>
                <div class="ui eight doubling cards">

                    <div ng-repeat="img in defaultImages2" class="card">
                        <div class="dimmable image">
                            <div class="ui inverted dimmer">
                                <div class="content">
                                    <div class="center">
                                        <div class="ui teal button" ng-click="">Choose</div>
                                    </div>
                                </div>
                            </div>
                            <img src="img/profile/{{img}}">
                        </div>
                    </div>

                </div>

            </div>

            <div class="ui horizontal divider">
                Or
            </div>
            <div class="ui teal labeled icon button">
                Upload your own
                <i class="upload icon"></i>
            </div>
    </div>
    <div class="actions">
        <div class="ui button">Cancel</div>
        <div class="ui button">OK</div>
    </div>
</div>