title: How to create this custom control with AngularJS directive?
body: <p>I'm a bit new to AngularJS and am trying to write a custom select control based on Zurb Foundation's custom select(see here: <a href="http://foundation.zurb.com/docs/components/custom-forms.html">http://foundation.zurb.com/docs/components/custom-forms.html</a>)</p>
  
  <p>I know I need to use a directive for this but am not sure how to accomplish this.</p>
  
  <p>It's going to have to be reusable and allow for the iterating of whatever array is passed in to it. A callback when the user selects the item from the dropdown list is probably needed. </p>
  
  <p>Here is the markup for the custom Foundation dropdown list:</p>
  
  <pre><code>    &lt;select name="selectedUIC" style="display:none;"&gt;&lt;/select&gt;
      &lt;div class="custom dropdown medium" style="background-color:red;"&gt;
          &lt;a href="#" class="current custom-select"&gt;Please select item&lt;/a&gt;
          &lt;a href="#" class="selector custom-select"&gt;&lt;/a&gt;
          &lt;ul ng-repeat="uic in uics"&gt;
              &lt;li class="custom-select" ng-click="selectUIC(uic.Name)"&gt;{{uic.Name}}&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>This works for now. I am able to populate the control from this page's Ctrl. However, as you can see, I'd have to do this every time I wanted to use a custom dropdown control.</p>
  
  <p>Any ideas as to how I can turn this baby into a reusable directive?</p>
  
  <p>Thanks for any help!</p>
  
  <p>Chris</p>