AngularJS：使用ng-if仅加载必要的DOM元素

Question

单击头部时，我的页面通过AJAX调用加载类别的内容。现在，我使用ng-show只显示当前类别：

<h3 ng-click="loadFood('food1')" id="food1">Food 1</h3>   
 <div class="food origin">
        <food-list ng-show="category == 'food1' " />
 </div>

<h3 ng-click="loadFood('food2')" id="food2">Food 2</h3>
    <div class="food origin">
         <food-list  ng-show="category == 'food2' " />
   </div>

这会将当前类别的内容加载到所有食物列表中，但会隐藏不活动的内容 - 因此DOM仍然很大，这正是我想要避免的。

我想使用ng-if代替，它应该添加＆amp;从DOM树中删除项目。但是我无法获得任何ng-if语句。如果我直接将ng-show换成ng-if，就像这样：

 <h3 ng-click="loadFood('food2')" id="food2">Food 2</h3>

    <div class="food origin">
         <food-list  ng-if="category == 'food2' " />
</div>

然后我将当前类别的内容加载到所有食物原点div中，并且所有类别都显示出来。

返工的最佳方法是什么，以便一次只将当前活动类别的内容加载到DOM中？

Here's my Plunkr.

更新

版本问题。使用1.0.8，ng-if直到稍后才添加。将Angular版本更新为1.2。 Ng-if现在原则上工作，但总是返回false。下一步，将ng-if语句设置为== true。