title: WebAPI return KeyValue list for select box
body: <p>I want a WebApi controller to return a Dictionary (keyvalue pairs) for a drop down box.  This is using angularjs $http.get() method.  When I get the data back to my controller and inspect the javascript, it appears I'm getting an Object with properties that are named like my keys in the Dictionary.  This does not work and the dropdown remains empty.</p>
  
  <p>JavaScript result from $http.get()</p>
  
  <pre><code>Object
  test1: "test 1"
  test2: "test 2"
  </code></pre>
  
  <p>WebAPI code:</p>
  
  <pre><code>[HttpGet]
  public Dictionary&lt;string, string&gt; Get()
  {
      return new Dictionary&lt;string, string&gt;(){
          { "test1", "test 1"},
          { "test2", "test 2"}
      };
  </code></pre>
  
  <p>Code in my view:</p>
  
  <pre><code>&lt;select name="originType" class="form-control"
          ng-model="OriginType"
          ng-options="type.Key as type.Value for type in values"&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>And my controller:</p>
  
  <pre><code>    $http.get('/api/mycontroller');
          .success(function (values) {
              $scope.values= values;
          })
  </code></pre>