AngularJS - hide parent element if children loop is empty (filtered)

Question

I have a case in which I have nested loops in which the child one is constructed by a filter function that takes parent as the argument. I also have another filter that just

Answer 1

I've seen this use-case a few times, here's my solution:

    

        
            {{group.name}}

        
        {{material.name}}
    

You can use $first or $last within the scope of the ng-repeat to show only for the first and last of each group. if there is no $first, it won't show the group name.

I just implemented this on my blog and updated your fiddle here: http://jsfiddle.net/ke793/1/

I'm not sure if this is the most elegant solution, but it seems fairly simple and it works. I'd love to see how others solved this.

Update: just realized you can use ng-if to prevent the group name from hitting the dom at all outside of the $first element. Little bit cleaner than ng-hide/ng-show, which sets display: none to the extra header every time.