title: custom filter on angular with an object nested inside a nested array
body: <p>I have an array with the name of <code>sports</code>, json:</p>
  
  <pre><code> [
    {
      "id": 26,
      "name": "LIVE Betting",
      "priority": 0,
      "leagues": []
    },
    {
      "id": 8,
      "name": "NBA",
      "priority": 3,
      "leagues": [
        {
          "id": 5932,
          "parent": 1000,
          "name": "NBA",
          "sport": {
            "id": 8,
            "name": "NBA"
          },
          "lineType": "G",
          "priority": [
            1,
            3
          ],
          "part": "0"
        }
      ]
    },
    {
      "id": 24,
      "name": "College Basketball",
      "priority": 4,
      "leagues": [
        {
          "id": 2599,
          "parent": 1000,
          "name": "NCAA BASKETBALL",
          "sport": {
            "id": 24,
            "name": "College Basketball"
          },
          "lineType": "G",
          "priority": [
            0,
            4
          ],
          "part": "0"
        },
        {
          "id": 2631,
          "parent": 1000,
          "name": "NCAA BASKETBALL ADDED GAMES",
          "sport": {
            "id": 24,
            "name": "College Basketball"
          },
          "lineType": "G",
          "priority": [
            1,
            4
          ],
          "part": "0"
        },
        ...
  </code></pre>
  
  <p>within that array you can see another with the name of <code>"leagues": [{...}]</code> which contains an object, my filter is searching fine thru the top array which is <code>sports</code> but once I try to find thru the <code>"name"</code> within <code>leagues</code> array then my app shows up a message that the filter is empty. </p>
  
  <pre><code>&lt;input type="search" ng-model="query"&gt;
  
  &lt;div ng-repeat="sport in sportsFilter = (sports | filter:query)"&gt;
          &lt;!--this array works fine--&gt;
          &lt;strong&gt;{{sport.name}}&lt;/strong&gt;
        &lt;/div&gt;
        &lt;div ng-repeat="league in sport.leagues"&gt;
          &lt;!--this one not works at all--&gt;
          {{league.name}}
        &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've been trying all the ways already, with a <code>resolve</code>, with different models, etc and actually I just realized that I need a custom filter so I would like you to give me a hand because I do not where to start from with it.</p>
  
  <p>or is there any easier way ?</p>