must re-compile ng element for loading html content dynamically

must re-compile ng element for loading html content dynamically, else the data cannot bind to angular

 

<div ng-app ng-controller="ctrl">

   ....

  <div id="saveProductForm" >

  </div>

  

 

</div>

 

<script>

$("#saveProductForm").html(load(url));  // this url refer to a page which incluce angular model  i.e. ng-model element

 refreshAngular();

 

function refreshAngular(){
   try{
      var $injector = angular.injector(['ng']);   
      var $div = $("#saveProductForm");                 
       $injector.invoke(function($compile) {
       var scope = angular.element($div).scope();          
         $compile($div)(scope);
         scope.submitted=false;
         scope.$digest();
          
       
      });  
    }catch(e){
      log("refreshAngular() error: "+e);  
      throw e;
     }
   }

</script>