AngularJS directive with repeater
<p>Is it possible to have a directive with a repeater inside it?</p>

<p>What I want is to create a list of people in alphabetical order where the people list is filtered for each group of letters.</p>

<p>The directive is as follows:</p>

<pre><code>.directive('azList', ['$compile', function($compile){

    var letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ#'.split('');
    var group = '';
    letters.forEach(function(letter){
        group = group + '\
        &lt;div class="list__group" id="list_' + letter + '"&gt;\
            &lt;h4 class="list__header"&gt;' + letter + '&lt;/h4&gt;\
            &lt;ul class="list__items"&gt;\
                &lt;li ng-repeat="person in people | orderBy: [{{person.lastname}}, {{person.firstname}}] | firstLetter:{{person.lastname}}:' + letter + '"&gt;\
                    &lt;a ui-sref="people.details({ personId: {{person.id}} })"&gt;\
                        &lt;span class="list__icon"&gt;&lt;img src="img/avatar.png"&gt;&lt;/span&gt;\
                        &lt;span class="list__text"&gt;\
                            &lt;span class="list__text__name"&gt;{{person.firstname}} &lt;b&gt;{{person.lastname}}&lt;/b&gt;&lt;/span&gt;\
                        &lt;/span&gt;\
                    &lt;/a&gt;\
                &lt;/li&gt;\
            &lt;/ul&gt;\
        &lt;/div&gt;';
    });

    return {
        restrict: 'AECM',
        template: group
    };

}])
</code></pre>

<p>And then the filter:</p>

<pre><code>.filter('firstLetter', function () {
    return function (input, key, letter) {
        input = input || [];
        var out = [];
        input.forEach(function (item) {
            if(letter == '#') {
                if ( !isNaN(parseInt(item[key][0])) )
                    out.push(item);
            }
            else if (item[key][0].toLowerCase() == letter.toLowerCase()) {
                out.push(item);
            }
        });
        return out;
    }
});
</code></pre>

<p>And then I use it like:</p>

<pre><code>&lt;az-list&gt;&lt;/az-list&gt;
</code></pre>

<p>However I just get the list of letters and it doesn't call the repeaters...</p>