AngularJS: To filter array and access nested array inside filtered result

Question

I want to filter an array of 'forms' by their 'id' and then return its 'fields'.

Currently I have this - but nothing is returned:

<select ng-options="option.displayName for option in forms.fields track by option.id|filter: {'id': component.form.id}" ng-model="component.field"></select>

The filtering on 'forms' works fine if I just want the complete form object, forms|filter: {'id': component.form.id}. However I want to get the field names and populate this select with those.

{        
  forms: [   
    {
      id: 1,
      name: 'form 1',
      fields: [
        {
          displayName: 'name 1',
          id: 1
        },
        {
          displayName: 'name 2',
          id: 2
        },
        {
          displayName: 'name 3',
          id: 3
        }
      }
    },
    {
      id: 1,
      name: 'form 1'
      fields: [
        {
          displayName: 'name 1',
          id: 1
        },
        {
          displayName: 'name 2',
          id: 2
        },
        {
          displayName: 'name 3',
          id: 3
        }
      ]
    }
  ]
}

Answer 1

I had tried this but didn't put the [0], but this works how i wanted.

option.displayName for option in (forms|filter: {'id': component.form.id})[0].fields track by option.id