Angularjs ng如果停止渲染div

我正在学习AngularJS，我只想在

$index==2

时，将一个

div括在另一个div中

这是我的代码：

<span ng-repeat="element in [0,1,2,3]">
    <div ng-if="$index == 2"> 
        <div> I'm the div
    </div>                  
    <div>
         My element: {{element}} - Index: {{$index}}
    </div>      
    <div ng-if="$index == 2"> 
        </div> I'm the /div
    </div>
</span>  

谢谢

编辑
预期结果是：

I'm the div
My element: 2 - Index: 2
I'm the /div

   span
     div
         My element: 0
     /div
     div
         My element: 1
     /div
     div
         div
            My element: 2
         /div
     /div
     div
         My element: 3
     /div
   /span

解决方法，但会导致一些重复：

<span ng-repeat="element in [0,1,2,3]">
    <div ng-if="$index == 2"> 
        <div> I'm the div
            <div>
                My element: {{element}} - Index: {{$index}}
            </div>      
        </div> I'm the /div
    </div>
    <div ng-if="$index != 2">
        My element: {{element}} - Index: {{$index}}
    </div>
</span>  


我是主管
我的元素：{{element}}-索引：{{$Index}
我是警察
我的元素：{{element}}-索引：{{$Index}

您的div未正确平衡-缺少a当$index==2时，在“我的元素…”之后添加缺少的部分，这里：我是/div这将不起作用-您破坏dom-在每个指令（如ng.if）中，dom必须完整如果您像应该（必须）那样使用缩进记住，angular仍然运行在JavaScript上，因此它不会“读取”您的HTML源文件；它从浏览器本身获取解析后的DOM，并使用JS方法修改内容。您的输出与预期结果完全匹配，给定您的示例中编写的DOM。