title: Angularjs directive: isolated scope and contained elements
body: <p>Why not the contained/child elements not render when use isolated scope. Suspecting the parent is not rendered yet, I tried adding a $timeout, still no luck. if I remove isolated scope by commenting out</p>
  
  <pre><code> scope: {},
  </code></pre>
  
  <p>it works. What to do make it work, where I need isolated scope and render contained elements.</p>
  
  <h2>Code: <a href="http://plnkr.co/edit/ZEwj9z?p=preview" rel="nofollow">http://plnkr.co/edit/ZEwj9z?p=preview</a></h2>
  
  <pre><code>'use strict';
  
  var app = angular.module('Directives', []);
  
  app.controller('MainCtrl', function ($scope) {
     $scope.data = [{id:1}, {id:2}, {id:3}];
  });
  
  
  app.directive('test', function ($timeout) {
    return {
              restrict: 'A',
              scope: {}, //if it is commented out, li would render
              link: function (scope, elm, attrs) {
                  console.log('Inside link..');
              }
      };
  });
  </code></pre>
  
  <p>template</p>
  
  <pre><code> &lt;div ng-controller="MainCtrl"&gt;
        &lt;ul test&gt;
          &lt;li ng-repeat="d in data"&gt; {{d}} &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>