title: Using an Angular directive to inject a JQueryMobile listview template
body: <p>Briefly - How to inject markup for JQuery Mobile widgets by way of a directive and have the markup actually convert into a JQM widget.</p>
  
  <p>Plnkr: <a href="http://plnkr.co/edit/3AZV93mktxPAPwU4JKgM?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/3AZV93mktxPAPwU4JKgM?p=preview</a></p>
  
  <p>Given a templateURL within an angular directive, whose target content specifies JQuery Mobile listview markup, how do I ensure that the markup is correctly acted upon by JQuery Mobile so that I get a proper JQM listview widget instead of just styled HTML? </p>
  
  <p>My current attempt is to target the listview within the linking function and call...</p>
  
  <pre><code>$("[data-role='listview']",element).listview();
  </code></pre>
  
  <p>This does seem to have an effect in that if I  call this function my unordered list is is then decorated with JQM css classes, but the unordered list is not widgetized as expected by the listview function.</p>
  
  <p><strong>My Directive</strong></p>
  
  <pre><code>app.directive('testDirective', function () {
  
      var link=function(scope, element, attrs){
        console.log($("[data-role='listview']"));
        $("[data-role='listview']",element).listview();
      };
  
      return {
          restrict: 'EA',
          templateUrl : "templates/static.html",
          link: link
      };
  });
  </code></pre>
  
  <p><strong>Template Markup JQM-listivew</strong></p>
  
  <pre><code>&lt;ul data-role="listview" data-inset="true"&gt;
      &lt;li ng-repeat="item in data"&gt;&lt;a href="#"&gt;{{item}}&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>What the result should look like...</strong></p>
  
  <p><img src="https://i.stack.imgur.com/Jk0od.jpg" alt="enter image description here"></p>
  
  <p><strong>What the result actually looks like</strong></p>
  
  <p><img src="https://i.stack.imgur.com/oo6gA.jpg" alt="enter image description here"></p>
  
  <p><strong>Final Working Directive...</strong></p>
  
  <pre><code>app.directive('testDirective', function () {
  
    var link=function(scope, element, attrs){
      console.log(element.context.innerHTML);
      var lview=$("[data-role='listview']",element);
      lview.listview();
  
      scope.$watchCollection("data",function(){
        console.log("watching collection");
        lview.listview("refresh");
      }); 
   };
  
   return {
      restrict: 'EA',
      scope:false,
      templateUrl : "templates/static.html",
      link: link
   };
  </code></pre>
  
  <p>})</p>