Javascript AngularJS-展开元素

我正在用AngularJS制作FAQ页面，我想要展开/折叠元素

这是我的HTML：

<div id="faq" class="">
    <div class="faq-item" collapse>
<div class="expend-element">
    <div class="question">
    <div class="text">Question 1</div>
</div>
</div>
<div class="answer">ANSWER 1</div>
</div>
<div class="faq-item" collapse>
<div  class="expend-element">
    <div class="question">
    <div class="text">Question 2</div>
</div>
</div>
<div class="answer">ANSWER 2</div>
</div>
<div class="faq-item" collapse>
<div class="expend-element">
    <div class="question">
    <div class="text">Question 3</div>
</div>
</div>
<div class="answer">ANSWER 3</div>
</div>
</div>

问题1
答复1
问题2
答复2
问题3
答复3

我的指示：

return {
    scope: {},
    template:   "<div class='faq-item' ng-click='expend()' ng-class='{ expended: active }'><div ng-transclude></div></div>",
    replace:    true,
    transclude: true,
    link: function(scope) {
        scope.active = false;
        scope.expend = function() {
            scope.active = !scope.active;
        };
    }
};

返回{
作用域：{}，
模板：“”，
替换：正确，
是的，
链接：功能（范围）{
scope.active=false；
scope.expense=函数（）{
scope.active=！scope.active；
};
}
};

这很好，但有一个问题。 我的主要目标是只扩展一个元素，但这会扩展所有元素

我怎么做这个