使用AngularJS展开和折叠表

Question

我一直在努力学习AngularJS。它进展顺利，但我有些困惑。我试图解决的问题是具有展开/折叠功能的嵌套表。我需要看看我是否正确地接近问题：

http://jsfiddle.net/jeffreyTang/3bud8/13/

这是我的问题：

1.。）我应该如何布置模板和附带的模型？如果存在分组层次结构，我应该只有一个代表UI状态的模型吗？或者每个分组都应该拥有自己的模型？我开始使用AngularJS的ng-show和ng-hide，但我无法让它在多个级别上工作。

<tr>
    <td ng-model="topic" class="topic"><i ng-click="expandOrCollapse()" class="icon-minus"></i>Topic</td>
    <td>thing</td>
    <td>thing</td>
</tr>

2.）目前，我的控制器在任何点击事件上修改模型，我的指令实际上操纵了DOM。我的理解是，你应该如何将这些东西分开。我的问题是，我应该为每个小组制作不同的手表吗？或者有没有办法可以抽象出处理点击内容的功能？

        scope.$watch('topic.expanded', function(newValue, oldValue) {
            if (!newValue) {
                // do something like (show/hide all children)
            }
        });

最终，我想要做的是在angularJS中这样的事情：

http://jordanrodriguez.com/wordpress/wp-content/uploads/2012/04/jquery-nested-accordion.html

提前致谢。