title: Injecting a HTML template to DOM on click the clean way (Create an instance of a class)?
body: <p>In my <strong>AngularJS project</strong> I have something like this (it's a dropdown menu with customer names. With a click on one of the names a Scrum Card should appear with the customer's names inserted in the card.):</p>
  
  <pre><code>&lt;ul class="dropdown-menu red" &gt;
      &lt;li ng-repeat="customer in customers" ng-click="addCard()"&gt;
          // HERE GOES THE HTML CODE
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I want to accomplish that a card will be inserted on every click. Now the problem is, that this card has multiple lines of HTML code. So it would be better to insert a whole new template. But I can't insert a template with ng-click, right? Besides that, to put the HTML in a variable and push it to this list is quite dirty, isn't it?</p>
  
  <p><strong>So, I thought about creating a Card Class in Coffeescript and create an instance on every click. What would be good practive to create this class on click with my HTML template/partial? How do I tell Angular to create a new instance of my class Card?</strong></p>
  
  <p>(Before that I created a Directive that had the templateURL attribute with my partial. But the same problem: I want to inject my directive on ng-click and not manually by including my directive in the code ... btw, I am an Angular and CoffeeScript beginner ...)</p>
  
  <p>Thank you very much in advance! </p>