title: How to force angular to render outside elements from the custom directive?
body: <p>I need a small help in angularjs, 
  please have a look on this 
  code (chrome browser):   </p>
  
  <p><a href="http://jsfiddle.net/Aravind00kumar/CrJn3/" rel="nofollow">http://jsfiddle.net/Aravind00kumar/CrJn3/</a></p>
  
  <pre><code>&lt;div ng-controller="mainCtrl"&gt;
      &lt;ul id="names"&gt;
          &lt;li ng-repeat="item in Items track by $index"&gt;{{item.name}} &lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;ak-test items="Items"&gt;
  
      &lt;/ak-test&gt;
  &lt;/br&gt;
      &lt;div id="result"&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  
  
      var app = angular.module("app",[]);
      app.controller("mainCtrl",["$scope",function($scope){
          $scope.Items = [
              {name:"Aravind",company:"foo"},
              {name:"Andy",company:"ts"},
              {name:"Lori",company:"ts"},
              {name:"Royce",company:"ts"},
          ];
          $scope.Title = "Main";
  
      }]);
  
  app.directive("akTest",["$compile",function($compile){
      return {
          restrict: 'E',
          replace: true,
          scope: {
              items: "="
          },
          link: function (scope, element, attrs) {
  //            var e =$compile('&lt;li ng-repeat="item in Items track by $index"&gt;{{item.name}} &lt;/li&gt;')(scope);
  //            $("#names").append(e);
  
              var lilength = $("#names li").length;
              var html ='&lt;div&gt; from angular ak-test directive: '+lilength+'&lt;/div&gt;';
              element.replaceWith(html);
          }
      };
  }]);
          $(function(){
              $("#result").html('from jquery:  '+$("#names li").length);
          });
  </code></pre>
  
  <p>I have created a custom directive and trying to access an element from the view which in the ng-repeat above my custom directive 
  The problem is, in the directive it was saying ng-repeat not rendered yet.
  Here is the problem
  I have two  elements </p>
  
  <pre><code>&lt;svg&gt;
  &lt;g&gt;
  List of elements
  &lt;/g&gt;
  &lt;g&gt;
  
  Based on the above rendered elements I have to draw a line between elements like a connection. I have to wait till the above elements to get render then only I can read the x,y positions and can draw a line.
  &lt;/g&gt;
  &lt;/svg&gt;   
  </code></pre>
  
  <p>Both elements and the connections are scope variables. As per my understanding both are in the same scope and execution flow starts from parent to child and finishes from child to parent. How can I force above ng-repeat rendering part to complete before starting the custom directive?</p>
  
  <p>is there any alternative available in angular to solve this dependency?</p>