Dynamic generated Custom Directive Not loaded correctly when using TemplateUrl
<p>Custom Directive that is using  <b>TemplateUrl</b> is not evaluating  correctly the angular expression  whenever I try to <strong>load the directive dynamically (e.g.: using Jquery and $compile)</strong> as below :</p>

<pre><code>var  scope = angular.element(document.getElementById("test1")).scope();
var _html='&lt;div&gt;{{name}}-&lt;/div&gt;&lt;mydirectivewithtemplateurl Generated Dynamically Using TemplateUrl &gt;Not Succeed&lt;/mydirectivewithtemplateurl&gt;';
$('#content').html($compile(_html)(scope));
</code></pre>

<p>But:</p>

<p>1- When I put directly the same directive (using TemplateUrl) into the page as below :</p>

<pre><code>&lt;mydirectivewithtemplateurl waytoload="Generated Stastically Using TemplateUrl "&gt;Not Succeed&lt;/mydirectivewithtemplateurl&gt;
</code></pre>

<p>It is working fine.</p>

<p>2- Also works fine when I use Template instead of TemplateUrl and loaded dynamically the same way as above: </p>

<pre><code> var  scope = angular.element(document.getElementById("test1")).scope();
            var _html='&lt;div&gt;{{name}}-&lt;/div&gt;&lt;mydirectivewithtemplateonly  waytoload="Generated Dynamically Using Template" &gt;Not Succeed&lt;/mydirectivewithtemplateonly&gt;';
           $('#content').html($compile(_html)(scope));
           setTimeout(function(){ scope.$apply();});
</code></pre>

<p>here is the custom directive I am using TemplateUrl</p>

<pre><code>app.directive('mydirectivewithtemplateurl',function ()
    {

      return {
     scope : {
       loadedstate:'@waytoload',

     },
    //template:'&lt;div&gt;{{loadedstate}}&lt;/div&gt;',
     templateUrl:'grid.html',

    }
    })
</code></pre>

<p>and here is the custom directive that I am using Template :</p>

<pre><code>app.directive('mydirectivewithtemplateonly',function ()
{

  return {
  scope : {
   loadedstate:'@waytoload',

 },
template:'&lt;div class="panel panel-primary"&gt;{{loadedstate}}&lt;/div&gt;'
// templateUrl:'grid.html',

} })
</code></pre>

<p>So my question is : how to solve evaluating angular expression  correctly inside the custom Directive when I use <strong>TemplateUrl</strong>  (instead of Template ) and  load it <strong>dynamically</strong> (jquery and @compile)   for better understanding about my problem please see  the full demo with the code  : <a href="http://plnkr.co/edit/f2eUdUwQF7o4pMCOHkLw?p=preview" rel="nofollow">http://plnkr.co/edit/f2eUdUwQF7o4pMCOHkLw?p=preview</a>
and feel free to update directly the code .
<strong>Please Note :</strong> defined Path in TemplateUrl is correct and is tested when added directly to that page 
Thanks</p>