javascript - ng-repeat を使用して異なる名前のネストされたオブジェクトの値を取得する

Question

次のように、プロパティごとに異なる名前の JSON オブジェクトがあります。

var definitions = {
  foo: {
    bar: {abc: '123'},
    baz: 'def'
  },
  qux: {
    broom: 'mop',
    earth: {
      tree: 'leaf',
      water: 'fish'
    },
    fig: {
      qwerty: 'olive'
    }
  },
  blix: {
    worm: 'dirt',
    building: 'street'
  }
  ... more nested objects
};

現在、このデータを次のように表示しています。

<div class="type" ng-repeat="(key,val) in definitions">
  <h4 ng-model="collapsed" ng-click="collapsed=!collapsed">{{key}}</h4>
  <div ng-show="collapsed">{{val}}</div>
</div>

そして、ここに私のコントローラーがあります：

App.controller('DefinitionsCtrl', function ($scope) {
  $scope.definitions = definitions;
});

{{val}}それぞれ{{key}}をクリックすると、プロパティの要約された文字列が表示されます。その部分をさらに適切に解析したいvalので、たとえばfooのネストされたプロパティ (barおよびbaz) にはそれぞれ独自の div があります。ただし、ネストされたすべての値に対してこれを行いたいと思います。これを手動で行うことはオプションではありません (巨大なファイルです)。

ネストされた名前がすべて異なることを考えると、これは可能ですか? カスタム フィルターを作成する必要がありますか、それともコントローラーで処理する必要がありますか?