title: scope is undefined in AngularJS directive with ajax request in controller
body: <p>I am working with AngularJS for about one week and I have a problem with a custom directive that I can't really understand.
  My main goal is to make a html table in a directive with json data loaded in a controller with the $http service.</p>
  
  <p>I have a template for my view. If I use Angular directive like ng-repeat or expressions it seems data are correctly loaded and bound to the scope, and I can render my view.</p>
  
  <p>But if I use  a custom directive at the document root, it is fired before the controller send the request. So when I use the scope in the link function scope.myData is undefined. 
  But if I use a custom directive inside a ng-repeat I can access local scope. I don't understand why Angular directive fire after data loading, and why mine fire before. Am I missing somehing?</p>
  
  <p>Actually, my data are really more complex than the sample, and I have to analyse them in a custom directive to generate my html table : make rowspan or colspan for certains attribute like group name in the sample data.</p>
  
  <p>Any help will be useful, thanks a lot in advance.</p>
  
  <p>Here my sample code.</p>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>    angular.module('myApp', [
    'ngRoute',
    'myApp.filters',
    'myApp.services',
    'myApp.directives',
    'myApp.controllers'
  ]).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
    $routeProvider.when('/test', {templateUrl: 'partials/test.html', controller: 'TestCtrl'});
    $routeProvider.otherwise({redirectTo: '/view1'});
  }]);
  </code></pre>
  
  <p><strong>controllers.js</strong></p>
  
  <pre><code>angular.module('myApp.controllers', []).
  
    controller('TestCtrl',['$scope', '$http',function($scope, $http){
              $http.get('data/test.json').success(function(data) {
                      $scope.myData = data;
              }); 
  
    }])   ;
  </code></pre>
  
  <p><strong>test.html</strong></p>
  
  <pre><code>&lt;!-- this works perfectly --&gt;
  &lt;h3&gt;{{myData.title}}&lt;/h3&gt;
  &lt;table class="table table-condensed table-bordered"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th ng-repeat="col in myData.cols"&gt;{{col.title}}&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr ng-repeat="row in myData.rows"&gt;
                      &lt;td&gt;{{row.group}}&lt;/td&gt;
                      &lt;td ng-repeat="col in row.cols"&gt;{{col}}&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;!-- does not work ! --&gt;
  &lt;table test-table&gt;&lt;/table&gt;
  </code></pre>
  
  <p><strong>directives.js</strong></p>
  
  <pre><code>angular.module('myApp.directives', []).
          .directive('testTable', ['$compile', function(compile){
                  return{
                      link: function(scope,elm,attrs,ctrl){
                      for(var i = 0, l= scope.myData.rows.length; i&lt;l; i++){
                          var tr = angular.element(['&lt;tr&gt;', '&lt;/tr&gt;'].join(''));
                          console.log(tr);
                          for(var j = 0; j&lt;scope.myData.cols.length; j++){                          
                             var td = angular.element(['&lt;td&gt;', String(scope.myData.rows[i].cols[j]), '&lt;/td&gt;'].join(''));
                             tr.append(td);  
                          }
                          elm.append(tr);
  
                      }
                      compile(elm.contents())(scope);
                  }
                  }
          }]);
  </code></pre>
  
  <p><strong>test.json</strong></p>
  
  <pre><code>{
      "title" : "This is a simple sample data.",
      "cols" : [{"title":"Group Name"},{"title":"Col1"},{"title":"Col2"},{"title":"Col3"}],
      "rows" : [
          {"group" : "group A","cols":["Something","Something else","Other stuff"]},
          {"group" : "group A","cols":["Something","Something else","Other stuff"]},
          {"group" : "group A","cols":["Something","Something else","Other stuff"]},
          {"group" : "group B","cols":["Something","Something else","Other stuff"]},
          {"group" : "group B","cols":["Something","Something else","Other stuff"]}
                  ]
  
  }
  </code></pre>