javascript - ng-clickを使用してDOM要素をロードおよびアンロードするAngularJS「アコーディオン」

Question

私のページにはいくつかのカテゴリがあり、コンテンツは JSON ファイルに保存されています。ページの読み込み時に、カテゴリにコンテンツがありません。カテゴリの見出しをクリックすると、その内容が読み込まれます。もう一度クリックするか、別のカテゴリをクリックすると、そのコンテンツが削除されます。

現在のスケッチ(Plunkr)では、ng-click でのコンテンツの読み込みは機能しますが、すべてのカテゴリには、クリックされたカテゴリのコンテンツが取り込まれます。私はそれを次のように呼んでいます：

  <div ng-controller="FoodCtrl">
    <h3 ng-click="loadFood('food1')">Food 1</h3>

       <div class="food origin">
              <food-list />
       </div>

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

          <div class="food origin">
               <food-list />
          </div>

  </div>

私が見ることができる問題は、にロードされるものの範囲を制限していない<food-list />ため、両方のリストが同じコンテンツを取得することです。<food-list />「現在アクティブなカテゴリ」のコンテキストを持つようにこれを再構築するにはどうすればよいですか? 「トグル」機能 (この JSFiddle など) はこれに適していますか?