AngularJs Filter to single array element and output a property

Question

Im trying to access the property of an array of objects by the current id in a loop.

<tr ng-repeat="feature in element.features">
    <td>{{ available_features | filter:{id: feature.feature_id} }}</td>
    <td>x</td>
</tr>

Available_features:
{
    id: 1
    name: "Feature 1"
},
{
    id: 2
    name: "Feature 2"
},
{
    id: 3
    name: "Feature 3"
},

element.features is an array of ids, the id references the id in the available_features array.
This outputs the object but I want the .name property.

UPDATE: Seems It works by:

<td>{{ (available_features | filter:{id: feature.feature_id})[0].name }}</td>

Answer 1

One option:

<td>{{ (available_features | filter:{id: feature.feature_id})[0].name }}</td>

Another option is to change the available_features array to an object and use the id as key, so that you could do something like this:

<td>{{ available_features[feature.feature_id].name }}</td>