AngularJS - Filter list by object property that has filter applied to it

Question

I want to filter a list of objects by their properties and used the filter filter. The problem is that some object properties have filters applied to them that change the format in which they are displayed (see formatDate filter in code below) and the filter filter will use the unformatted object properties.

Eg: There is a video with .duration = 150 (seconds) which will be displayed as 00:02:30 (because of the formatDate filter). If a user searches for "02", the video will not be found because the .duration property of the video was searched and "02" doesn't match 150.

What is the easiest way to filter by the displayed value instead of the "raw" value?
I thought about adding a getDurationFormatted() function to every object in the list and displaying and filtering specifically by that property, but this would severely decrease the expressiveness of the HTML.

<input ng-model="query">

<tr ng-repeat="video in videos | filter:query">
    <td>
        {{ video.name }}
    </td>
    <td>
        <!-- The formatDate filter is used to format the amount of seconds -->
        {{ video.duration | formatDate:'HH:mm:ss' }}
    </td>
</td>

Answer 1

You can extend every object in the array with additional preformatted property corresponding to what users would see. Then filtering will work for user friendly input.

This is the simplest solution that requires only minor template modification:

<tr ng-repeat="video in videos | filter:query">
    <td>
        {{ video.name }}
    </td>
    <td>
        <!-- The formatDate filter is used to format the amount of seconds -->
        {{ video.durationFormatted = (video.duration | formatDate:'HH:mm:ss') }}
    </td>
</tr>

Demo: http://plnkr.co/edit/7JxdCAJtPamMWsfVSwaN?p=preview