title: Angular Directive Template Update on Data Load
body: <p>I have a directive whose data is being received via an api call. The directive itself works fine, the problem arises <em>(I believe)</em> because the directive is loaded before the api call finishes. This results in the whole shebang just not working. Instead of my expected output, I just get <code>{{user}}</code>.</p>
  
  <p>My directive looks like this:</p>
  
  <pre><code>app.directive('myDirective', function() {
    return {
      restrict: 'A',
      require: '^ngModel',
      scope: {
        ngModel: '=',
      },
      template: '&lt;tbody style="background-color: red;" ng-bind-html="renderHtml(listing_html)"&gt;&lt;/tbody&gt;',
      controller: ['$scope', '$http', '$sce',
        function($scope, $http, $sce) {
          $scope.listing_html += "&lt;td&gt;{{user.name}}&lt;/td&gt;"
          $scope.renderHtml = function(html_code) {
            return $sce.trustAsHtml(html_code);
          };
        }
      ],
      link: function(scope, iElement, iAttrs, ctrl) {
        scope.$watch('ngModel', function(newVal) {
          // This *is* firing after the data arrives, but even then the
          // {{user}} object is populated. And the `user in ngModel` doesn't
          // run correctly either.
          console.log(scope.ngModel);
          scope.listing_html = "&lt;tr ng-repeat='user in ngModel'&gt;&lt;td&gt;{{user}}&lt;/td&gt;&lt;/tr&gt;"
        })
      }
  
    };
  });
  </code></pre>
  
  <p>And my html is simply</p>
  
  <pre><code>&lt;table my-directive my-options='{"Name": "name", "Email": "email"}' ng-model='userData'&gt;&lt;/table&gt;
  </code></pre>
  
  <p>I've created a <a href="http://plnkr.co/edit/eKHWV3fgEXOKlqpQg0kf?p=preview" rel="nofollow noreferrer">plunker</a> with a ton of comments to hopefully help explain the issue.</p>
  
  <p>This question is <em>very</em> similar to <a href="https://stackoverflow.com/questions/13141816/angular-js-update-scope-and-template-after-jsonp-request">this one</a>, with the key distinction of that solution not working. Adding <code>ng-cloak</code> to mine just makes it not display.
  It may also be worth noting that I've been using <a href="http://www.ng-newsletter.com/posts/directives.html" rel="nofollow noreferrer">this</a> as reference on the way to construct a directive.</p>