Шаблон директивы AngularJS не обновляется, если область заполняется через ajax

Я постарался дать этот вопрос как можно более точное название.
Я новичок в AngularJS, но я пошатнулся по этой проблеме. Я попытался сделать jsfiddle, чтобы лучше проиллюстрировать мою проблему, но она опирается на слишком много отдельных файлов. И, увы, он еще не в сети, так что будьте терпеливы.:)

Так что в основном у меня есть приложение, которое я построил с помощью yeoman init angular, а мой app.js выглядит так:

"use strict"

var myApp = angular.module("myApp", [])
.config(function($routeProvider) {
    $routeProvider
    .when("/lineup", {
        templateUrl: "views/lineup.html",
        controller: "LineupCtrl"
    })
    //other routes
    .otherwise({
        redirectTo: "/"
    });
})
.directive("playerlist", function() {
    return {
        restrict: "E",
        transclude: false,
        scope : {},
        templateUrl : "views/directives/playerlist.html",
        controller : function($scope) {
            $.get("/players")
            .success(function(players) {
                $scope.players = players;
            });
        },
        replace : true
    }
});

My index.html поднимает app.js и имеет привязку, которая ссылается на #/lineup, которая эффективно открывает views/lineup.html; чтобы упростить вещи, допустим, что последний содержит только тег <playerlist></playerlist> (custom).
Внутри функции директивного контроллера я уверен, что $.get("/players") работает так, как должно, потому что я вижу на вкладке chrome network, что ответ приходит правильно, как массив игроков.
Наконец, мой views/directives/playerlist.html имеет код, который заменяет тег <playerlist>, который следует:

<table class="table table-striped">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Role</th>
            <th>Strength</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="player in players">
            <td>{{player.first_name}} {{player.last_name}}</td>
            <td>{{player.age}}</td>
            <td>{{player.role}}</td>
            <td>{{player.strength}}</td>
        </tr>
    </tbody>
</table>

Моя идея состояла в том, чтобы сделать директиву "playerlist" независимой от LineupCtrl, поскольку я мог бы повторно использовать ее в другом месте проекта.
Итак, вот так: когда я нажимаю на якорь, который загружает #/lineup в первый раз, элемент tbody в приведенной выше таблице пуст (к нему не добавляются строки); Самое смешное, когда я нажимаю на него второй раз, таблица правильно заполнена игроками, которые я получаю с инструкцией $.get("/players"). Я подозреваю, что это связано с небольшой задержкой, возникающей между рендерингом playerlist.html и переменной $scope.players. Но не все ли смысл приложения angular? Что при изменении переменных области соответствующие обновления (и их шаблоны) обновляются?
Пожалуйста, помогите!
Cheers,

Andrea

Ответ 1