Angular filter by child array

Filter the cast of the Avengers with a custom filter.

by scottstanfield

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/2.3.1/readable/bootstrap.min.css">
<div ng-app="myApp" class="container">
    <div class="row">
        <div class="span8">
             <h2>Filter by child tag in Angular</h2>

            <p>Each actor has as their first name written as an array of NATO Phoentic words.</p>
            <p>Type 'sierra' or 'uniform' or 'charlie' to test.</p>
        </div>
    </div>
    <div ng-controller="AvengersCtrl">
        <div class="row">
            <div class="span8 well">
                <p> 
                    <a class="btn btn-small" href="#" ng-click="word='alpha'">alpha</a>
                    <a class="btn btn-small" href="#" ng-click="word='charlie'">charlie</a>
                    <a class="btn btn-small" href="#" ng-click="word='uniform'">uniform</a>
                </p>
                <form class="well form-search">
                    <input type="text" ng-model="word" ng-init="word=''" 
                        class="input-large" autofocus="autofocus" autocapitalize="off" 
                    autocorrect="off" autocomplete="off" placeholder="all tags" /> 
                    
                    <a class="btn btn-inverse" href="#" ng-click="word=''">
                        <i class="icon-remove icon-white"></i> clear
                    </a>
                            
                </form>
                <hr>
                <ul ng-repeat="actor in avengers | filter:{letters: word} | orderBy:'-birthdate'">
                    <li>{{actor.name}} is {{2013 - (actor.birthdate | date:'yyyy')}}</li>
                    <p>{{actor.letters | filter:word}}</p>
                </ul>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="span4">
            <p>link to <a href="http://jsfiddle.net/scottstanfield/5uSdd">jsfiddle source</a>

            </p>
        </div>
    </div>
</div>

JavaScript

var myApp = angular.module('myApp', []);

function AvengersCtrl($scope, Avengers) {
    $scope.avengers = Avengers;
    $scope.word = "echo";

    $scope.clicky = function (e) {
        $scope.word = text;
    }
}

myApp.factory('Avengers', function () {
    var Avengers = {};

    Avengers = [{
        "name": "Scarlett Johansson",
            "character": "Black Widow",
            "birthdate": "1984-01-22T00:00:00.000Z",
            "letters": ["sierra", "charlie", "alpha", "romeo", "lima", "echo", "tango"]
    }, {
        "name": "Samuel L. Jackson",
            "character": "Nick Fury",
            "birthdate": "1948-12-21T00:00:00.000Z",
            "letters": ["sierra", "alpha", "mike", "uniform", "echo", "lima"]
    }, {
        "name": "Robert Downey Jr",
            "character": "Iron Man",
            "birthdate": "1965-04-04T00:00:00.000Z",
            "letters": ["romeo", "oscar", "bravo", "echo", "romeo", "tango"]
    }, {
        "name": "Chris Evans",
            "character": "Captain America",
            "birthdate": "1981-06-13T00:00:00.000Z",
            "letters": ["charlie", "hotel", "romeo", "igloo", "sierra"]
    }, {
        "name": "Jeremy Renner",
            "character": "Hawkeye",
            "birthdate": "1971-01-07T00:00:00.000Z",
            "letters": ["julia", "echo", "romeo", "mike", "yankee"]
    }, {
        "name": "Gwyneth Paltrow",
            "character": "Pepper Potts",
            "birthdate": "1972-09-27T00:00:00.000Z",
            "letters": ["golf", "whiskey", "yankee", "november", "echo", "tango", "hotel"]
    }];


    return Avengers;
});