title: Convert controller code to a reusable directive
body: <p>I built this "component" in Angular.js but I don't know what is the best way to encapsulate it into a reusable element directive.</p>
  
  <p>Here is the current code: <a href="http://plnkr.co/edit/OdWoUXOpoZ6pIVbMUVXk?p=preview" rel="nofollow">http://plnkr.co/edit/OdWoUXOpoZ6pIVbMUVXk?p=preview</a></p>
  
  <p>Here is how I would like to use it</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;span ng-bind="selection"&gt;&lt;/span&gt;
  
  &lt;checkbox-list ng-model="selection"&gt;
  
      &lt;checkbox value="name1"&gt;Label 1&lt;/checkbox&gt;
      &lt;checkbox value="name1"&gt;Label 2&lt;/checkbox&gt;
      &lt;checkbox value="name1"&gt;Label 3&lt;/checkbox&gt;
      &lt;checkbox value="name1"&gt;Label 4&lt;/checkbox&gt;
      &lt;checkbox value="name1"&gt;Label 5&lt;/checkbox&gt;
  
  &lt;/checkbox-list&gt;
  </code></pre>
  
  <p>The best behaviour would be to be able to reuse the <code>&lt;checkbox&gt;</code> even outside of <code>&lt;checkbox-list&gt;</code>. Also, I think it would be boilerplate to bind a model to each <code>&lt;checkbox&gt;</code>, at least not from html code. But using <code>&lt;checkbox&gt;</code> outside of the list would require a model binding.</p>
  
  <p>I used <code>&lt;checkbox&gt;</code> instead of <code>&lt;input type="checkbox"&gt;</code> because I want to have a custom design for the checkboxes, which involves custom template and css.</p>
  
  <p>Could you guys give me some advices on this situation? A plunker code would be much appreciated but not required, I just need your opinion.</p>
  
  <p>Thank you!</p>