我正在使用Bootstrap和AngularJS在HTML中动态创建可点击的标签。更具体地说，我使用ng-switch和ng-switch-when指令来控制在任何给定时间显示哪个选项卡的内容。
请注意：下面你会注意到我使用控制器进行DOM操作。我意识到执行DOM操作的“AngularJS方式”是使用指令（而不是控制器）。我不是故意违反良好的编码习惯的人，但是因为我试图理解这个问题，我在学习控制器和指令的过程中偶然发现，我要求你现在只考虑使用控制器，因为那是我认为可能会导致这个问题。
如果你继续阅读你会注意到我已经找到了一个基于指令的解决方案（即“AngularJS方式”），但我特别询问使用控制器时出现的问题{{1 }}
我面临的问题如下。当我将ng-switch-when标记（包含div指令）附加到容器上，然后使用ng-switch-when编译这些标记时，使用$compile的每个标记的内容会以某种方式重复。为了防止这个问题变得太长，我把这个想法置于代码的期望行为背后的第一个JSFiddle的注释中，这证明了这个问题。
JSFiddle: What I have now - 使用控制器进行DOM操作（“非AngularJS方式”），导致使用ng-switch-when意外复制标记。
如何重现复制的深入描述如下。创建新标签后，似乎之前点击的标签内容（包含ng-switch-when的{{1}}内）重复。您可以通过加载上述JSFiddle，右键单击div文本，选择ng-switch-when，然后在选项卡式窗格中按Default来查看这种情况。您会看到现在有两个Inspect element代码与Analysis > Create Tab而不是一个。如果您继续创建新标签，则此格式将继续div，ng-switch-when="Default"，依此类推。或者，只需单击view1 5次，然后查看选项卡1-4中的重复项。无论哪种方式，每当创建新选项卡时，您都会看到先前选择的选项卡内容加倍。
由于这种意外行为而感到沮丧，我继续使用AngularUI's Bootstrap components实现基于指令的解决方案，该解决方案为标签组件创建自定义指令，以获得所需的功能。
JSFiddle: What I want to happen in the above JSFiddle - 使用DOM操作的指令（“AngularJS方式”）。
但是，正如我所提到的，我想知道为什么我的第一个JSFiddle不起作用。请参阅下面的正式问题。
为什么会出现这种重复？有没有办法防止/解决重复项的创建？记住，我不会在实践中使用它，我只是好奇这个问题是否可以解决。
请注意：我不打算使用jQuery解决此问题，例如this jQuery solution。虽然我知道AngularJS使用了一个名为jqLite的更轻的jQuery版本，但我正在寻找一种“纯AngularJS”解决方案。
HTML：
view2JS：
Analysis > Create Tab