javascript - Angular, hide parent when there are no child-elements with nested ng-repeat's -

i know there posts on subject, specific example working, because of nesting:

i have faq 3 levels of nesting, rendered ng-repeats, want hide category , subcategory if query returns no questions.

i made fiddle, can me work? http://jsfiddle.net/lp02huqm/ thanks!

html

<div ng-app="faqapp" ng-controller="faqcontroller">     <input ng-model="query" type="text">     <ul class="collapse-list">         <li ng-repeat="category in faq | filter:matcheveryword() | orderby:rankorder">                    <h3>{{category.category}}</h3>             <div>                 <ul>                     <li ng-repeat="subcategory in category.subcategories | filter:matcheveryword()">                                <h3>{{subcategory.subcategory}}</h3>                         <div>                             <ul>                                 <li ng-repeat="question in subcategory.questions | filter:matcheveryword()">                                            <h3>{{question.question}}</h3>                                     <div>{{question.answer}}</div>                                        </li>                             </ul>                         </div>                     </li>                 </ul>             </div>         </li>     </ul>  </div> 

javascript:

var faqapp = angular.module('faqapp', []);  faqapp.controller('faqcontroller', ['$scope' , function ($scope){   $scope.faq = [     {category: 'category1',      rank:2,      subcategories: [          {subcategory: 'subcategory1',           questions: [               {                   question: 'this first question',                   answer: 'this answer on first question'               },               {                   question: 'this second question',                   answer: 'this answer on second question'               }            ]          },          {subcategory: 'subcategory2',           questions: [               {                   question: 'this first question of second subcategory',                   answer: 'this answer on first question of second subcategory'               },               {                   question: 'this second question',                   answer: 'this answer on second question'               }            ]          }      ]     },     {category: 'category2',      rank:1,      subcategories: [          {subcategory: 'subcategory3',           questions: [               {                   question: 'apple',                   answer: 'the answer apple'               },               {                   question: 'banana',                   answer: 'the answer banana'               }            ]          },          {subcategory: 'subcategory4',           questions: [               {                   question: 'this first question of subcategory 4',                   answer: 'this answer on first question of subcategory 4'               }           ]          }      ]     } ];     $scope.rankorder = 'rank';     $scope.query = '';         $scope.matcheveryword = function() {         return function( item ) {             var string = json.stringify(item).tolowercase();             var words = $scope.query.tolowercase();              if(words){                 var filterby = words.split(/\s+/);                 if(!filterby.length){                     return true;                 }             } else {                 return true;             }              return filterby.every(function (word){                  var exists = string.indexof(word);                 if(exists !== -1){                     return true;                 }             });          };     }; }]); 

in li element, add ng-show show subcategories if questions present. like:-

 <li ng-repeat="subcategory in category.subcategories | filter:matcheveryword()" ng-show="arequestionspresent(subcategory)">  

now, in controller, define method arequestionspresent, evaluate whether there questions or not:-

$scope.arequestionspresent = function(category) {     return category.questions.length > 0; } 

i in hurry otherwise have given more details. hope helps.