title: Dynamic tab content and params
body: <p>I am trying to build a set of dynamic tabsets with dynamic content,</p>
  
  <p><a href="http://plnkr.co/edit/bhtMin1B1dwwqYvyrpVl?p=preview" rel="nofollow">http://plnkr.co/edit/bhtMin1B1dwwqYvyrpVl?p=preview</a></p>
  
  <p>1) Clicking on Dashboard opens a new tab with directive</p>
  
  <ul>
  <li>When I provide the content of a as the directive, this gets rendered as a string. </li>
  <li>I've tried to use the html bind unsafe and $compile functions to make this run as an Angular component - but haven't be able to</li>
  </ul>
  
  <p>2) Click on menu [Project Management-> Project] shows a list of Sites, on clicking of which I need to open another tab passing a parameter (Proj-ID or Site-Id)</p>
  
  <ul>
  <li>The idea is to call a function on click of the Site Name, I'll open a new tab with content as a directive</li>
  <li>But since I am stuck with the previous problem, I am not able to do this</li>
  <li>Is this the right way of passing params to the directive.</li>
  </ul>
  
  <p>Right now, the plunkr tries to o/p the tab content as a file, a string and compile - with no success</p>
  
  <p>[I've revised this question with relevant details from a prev question]</p>
  
  <p><strong>SOLUTION FOUND FOR #1:</strong></p>
  
  <p>For some reason ng-bind-html-unsafe doesn't work with Angular Elements.
  I had to do create a compile directive <a href="http://docs.angularjs.org/api/ng" rel="nofollow">http://docs.angularjs.org/api/ng</a>.$compile, based on info I found here on STO</p>