title: AngularJS directive template not updating if scope is populated via ajax
body: <p>I tried to give this question as precise a title as I could.<br/>
  I'm pretty new to AngularJS but I'm stomped on this issue. I tried to make a jsfiddle to better illustrate my issue but it relies on too many separate files. And alas it is not online yet, so bear with the verbosity. :)<br/><br/>
  So basically I have an app I built with <code>yeoman init angular</code>, and my <code>app.js</code> looks like this:</p>
  
  <pre><code>"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
      }
  });
  </code></pre>
  
  <p>My <code>index.html</code> picks up <code>app.js</code> and has an anchor that references <code>#/lineup</code>, which effectively opens <code>views/lineup.html</code>; to simplify things, let's assume the latter only contains the (custom) <code>&lt;playerlist&gt;&lt;/playerlist&gt;</code> tag.<br/>
  Inside the directive's controller function I'm sure that <code>$.get("/players")</code> works as it should because I can see from chrome's network tab that the response comes through correctly as an array of players.<br/>
  Finally, my <code>views/directives/playerlist.html</code> has the code that replaces the <code>&lt;playerlist&gt;</code> tag, which follows:</p>
  
  <pre><code>&lt;table class="table table-striped"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;Age&lt;/th&gt;
              &lt;th&gt;Role&lt;/th&gt;
              &lt;th&gt;Strength&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr ng-repeat="player in players"&gt;
              &lt;td&gt;{{player.first_name}} {{player.last_name}}&lt;/td&gt;
              &lt;td&gt;{{player.age}}&lt;/td&gt;
              &lt;td&gt;{{player.role}}&lt;/td&gt;
              &lt;td&gt;{{player.strength}}&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>My idea was to make the "playerlist" directive independent from <code>LineupCtrl</code> for I might want to reuse it elsewhere in the project.<br/>
  Ok so here goes: when I click on the anchor that loads <code>#/lineup</code> the first time, the <code>tbody</code> element of the above table is empty (no rows appended to it); the funny thing is, when I click on it a second time, the table is correctly populated with the players I get with the <code>$.get("/players")</code> instruction. I suspect this is due to the slight lag that occurs between the rendering of playerlist.html and the $scope.players variable being assigned. But isn't that the whole point of an angular app? That when scope variables change the respective views (and their templates) are updated?<br/>
  Please help!<br/>
  Cheers,<br/><br/>
  Andrea</p>