Angular JS : How do I Lazy load my directive?

Question

my html structure is like below

main.html

    <div class="row">
        <div class="col-xs-9" id="myResultPage">

                      <!-- Code for service call to get the results and render it back -->

          </div>

          <div class="cols-xs-3">
                 <div right-corner></div> //Calls the directive here
         </div>

**right-corner.html**

<div class="col-xs-3">
    <!-- Code for directive html -->

</div>

**right-corner.js**
(function() {
    angular
    .module("myApp")
    .directive("rightCorner", rightCornerDirective)

function rightCornerDirective() {
         return { 
                  //Directive controller code goes here
           };

}

In this situation, my rightCornerDirective needs to load only after the div id="myResultPage" get rendered. It is okay both get rendered on simultaniously. How do i do that?

Answer 1

There isn't enough information given to really give a full answer but using ng-if should solve problem

<div ng-if="someVar" right-corner></div>

Set $scope.someVar = true when you receive the data for other element.

If more time is needed to allow other rendering you can also do :

$timeout(function(){
   $scope.someVar = true;
})

This will push the ng-if to end of the digest cycle. Remember to inject $timeout in controller