title: AngularJS: Dropdown directive with custom ng-options
body: <p>I'm trying to create a dropdown directive where i want to specify the selects ng-options  "option value" and "option description" attributes by specifying them with the directives attributes. See code for a better understanding... </p>
  
  <p>Here is my directive. This will obviously not work, but i think it will describe what i'm trying to do...</p>
  
  <pre><code>app.directive('dropdown', function(){
  return {
      restrict: 'E',
      scope: {
          array: '='
      },
      template:   '&lt;label&gt;{{label}}&lt;/label&gt;' +
                  '&lt;select ng-model="ngModel" ng-options="a[{{optValue}}] as a[{{optDescription}}] for a in array"&gt;' +
                      '&lt;option style="display: none" value=""&gt;-- {{title}} --&lt;/option&gt;' +
                  '&lt;/select&gt;',
      link: function (scope, element, attrs) {
          scope.label = attrs.label;  
          scope.title = attrs.title;
          scope.optValue = attrs.optValue;
          scope.optDescription = attrs.Description;
      }
  };
  </code></pre>
  
  <p>});</p>
  
  <p>...and here is how i want to use it</p>
  
  <pre><code>&lt;dropdown title="Choose ferry" label="Ferries" array="ferries" opt-value="Id" opt-description="Description"&gt;&lt;/dropdown&gt;
  &lt;dropdown title="Choose route" label="Routes" array="routes"  opt-value="Code" opt-description="Name"&gt;&lt;/dropdown&gt;
  </code></pre>
  
  <p><strong>And the fiddle: <a href="http://jsfiddle.net/wXV6Z/1/" rel="nofollow">http://jsfiddle.net/wXV6Z/1/</a></strong></p>
  
  <p>If you have a solution to this problem, or perhaps more likely, have a different opinion on how to tackle it, please let me know!</p>
  
  <p>Thanks
  /Andreas</p>