title: Run jQuery after Angular is done rendering
body: <p>I am trying to populate a profile page with a json object in angularjs. I am using directives for this. I have a profile directive which has profile-section directives as children. Profile section has profile sub-section directives as children. I need to run a snippet just before angular has started compiling and just after angular has finished rendering the template. </p>
  
  <p><strong>I tried</strong> </p>
  
  <pre><code>app.run()
  $timeout
  $evalAsync
  $(document).ready()
  $scope.$broadcast
  postLink function
  </code></pre>
  
  <p>This is a skeleton of my code</p>
  
  <pre><code>    var app = angular.module("profile",[]);
  
  app.controller("profileController",['$scope',function($scope){
      var ctrl = this;
  
  
  }])
  
  .controller("profileSectionController",['$scope',function($scope){
      //$scope.$emit('dataloaded');
  
  }])
  
  
  .directive("profile",[function(){
      return {
          transclude:true,
          restrict:'EA',
          replace:true,
          templateUrl:'/sstatic/angular_templates/de/profile.html',
          scope:{
              person:"="
          },
          controller:'profileController',
          compile:function(elem,attrs,transclude){
              return {
                  pre : function link(scope,elem,attrs,ctrl){
                      //angular.element(elem).find(".candidate-name").append(scope.person.name);
                  //$(elem).css({"display":"none"});
  
                  },
                  post : function link(scope,elem,attrs,ctrl){
                      //angular.element(elem).find(".candidate-name").append(scope.person.name);
                      //$(elem).css({"display":"block"});
  
  
  
                  }
              }
          }
      }
  }])
  .directive("profileSection",[function(){
      return {
          transclude:true,
          restrict:'EA',
          replace:true,
          require:'^profile',
          templateUrl:'/sstatic/angular_templates/de/profile-section.html',
          scope:{
              title:"@",
              right:"=",
              sub:"="
          },
          controller:"profileSectionController",
          compile:function(elem,attrs,transclude){
              return {
                  pre : function link(scope,elem,attrs,ctrl){
                      //angular.element(elem).find(".candidate-name").append(scope.person.name);
  
                  },
                  post : function link(scope,elem,attrs,ctrl){
                      //angular.element(elem).find(".candidate-name").append(scope.person.name);
  
  
                  }
              }
          }
      }
  }])
      .directive("profileSub",[function(){
      return {
          transclude:true,
          restrict:'EA',
          replace:true,
          require:'^profile',
          templateUrl:'/sstatic/angular_templates/de/profile-sub-section.html',
          scope:{
              subsection:"="
          },
          controller:function(){
  
          },
          compile:function(elem,attrs,transclude){
              return function link(scope,elem,attrs,ctrl){
                      //angular.element(elem).find(".candidate-name").append(scope.person.name);
  
  
                  }
          }
      }
  }])
  </code></pre>
  
  <p>However, most of them fire after profile directive is loaded, but not after its children have loaded. I cannot attach it to the children because, it will fire too many times. </p>
  
  <p><strong>This is the expected timeline of events.</strong> </p>
  
  <pre><code>Start Render Event Fires
  Profile Linked 
  Profile Section 1 Linked
  Profile Sub Section 1 Linked
  Profile Sub Section 2 Linked
  Profile Section 2 Linked 
  Profile Sub Section 1 Linked
  Profile Sub Section 2 Linked
  Profile Sub Section 3 Linked
  ....
  End Render Event Fires
  </code></pre>
  
  <p><strong>This is how it happens now.</strong> </p>
  
  <pre><code>Start Render Event Fires
  Profile Linked 
  End Render Event Fires
  Profile Section 1 Linked
  Profile Sub Section 1 Linked
  Profile Sub Section 2 Linked
  Profile Section 2 Linked 
  Profile Sub Section 1 Linked
  Profile Sub Section 2 Linked
  Profile Sub Section 3 Linked
  ....
  </code></pre>
  
  <p>I need some way of running a script after every single part of angular is done loading in the DOM.</p>
  
  <p>Please help. Much appreciated.</p>