Angular js filter array inside array

Question

I am having a hard time doing an Angular filter to solve a problem as below.

The filter logic is as below:
1) If all listItem of that item has qtyLeft != 0, do not display that item
2) If any of the listItem of that item has qtyLeft == 0, display the item title as well as coressponding listItem that have qtyLeft == 0

Here's a basic example of my data structure, an array of items:

$scope.jsonList = [
    {
        _id: '0001',
        title: 'titleA',
        list: {
            listName: 'listNameA',
            listItem: [
                {
                   name: 'name1',
                   qtyLeft: 0
                },
                {
                   name: 'name2',
                   qtyLeft: 0
                },
            ]
        }
    },
    {
        _id: '0002',
        title: 'titleB',
        list: {
            listName: 'listNameB',
            listItem: [
                {
                   name: 'name3',
                   qtyLeft: 2
                },
                {
                   name: 'name4',
                   qtyLeft: 0
                },
            ]
        }
    },
    {
        _id: '0003',
        title: 'titleC',
        list: {
            listName: 'listNameC',
            listItem: [
                {
                   name: 'name5',
                   qtyLeft: 2
                },
                {
                   name: 'name6',
                   qtyLeft: 2
                },
            ]
        }
    },
]

Here is the final expected outcome:

<div ng-repeat="item in jsonList | filter: filterLogic">
    <div> </div>
</div>

// final outcome
<div>
    <div>Title: titleA, ListItem: Name1, Name2</div>
    <div>Title: titleB, ListItem: Name4</div>
</div>

Answer 1

Created working Plunkr here. https://plnkr.co/edit/SRMgyRIU7nuaybhX3oUC?p=preview

Do not forget to include underscore.js lib in your project if you are going to use this directive.

<div ng-repeat="jsonItem in jsonList | showZeroElement track by $index">
   <div>Title:{{ jsonItem.title}}, ListItem:<span ng-repeat="item in    
        jsonItem.list.listItem track by $index" ng-if="item.qtyLeft==0"> 
     {{item.name}}</span>
  </div>
</div>

And

app.filter('showZeroElement', function() {
return function(input) {
var items = []
angular.forEach(input, function(value, index) {
  angular.forEach(value.list.listItem, function(val, i) {
    var found = _.findWhere(items, {
      'title': value.title
    })
    if (val.qtyLeft === 0 && found === undefined) {
      items.push(value)
    }
  })
})
return items
}
})