title: AngularJS: why does my dropdown have an initial blank entry?
body: <p>I am fetching some JSON frm a server and using it to populate a combobox.</p>
  
  <p>A JSON entry looks like this  </p>
  
  <pre><code>    "campaign_id": "2",
      "customer_id": "1",
      "title": "Purple monkey dishwasher",
      "description": "perfectly cromulent",
      "start_time": "19/09/2015 09:42:06",
      "end_time": "19/10/2015 09:42:06"
  </code></pre>
  
  <p>And I declare my drop down thus-wise</p>
  
  <pre><code>&lt;select name="SelectCampaignForConnections" 
   ng-model="connectionsCampaignDropDown" 
   ng-options="campaign.title for campaign in campaigns"  
   ng-change="ShowConnectionsForCampaign(connectionsCampaignDropDown)"&gt;
  </code></pre>
  
  <p>I initialize the model of the select ...</p>
  
  <pre><code>    $http.get(url)   
          .success(function(data, status, headers, config) 
              {
                 if ($scope.connections.length &gt; 0)
                     $scope.connectionsCampaignDropDown = $scope.connections[0];
  </code></pre>
  
  <p>When the dropdown shows, it contains the <code>title</code> element of each JSON entry, <strong><em>BUT</em></strong>, it has an initial blank entry.</p>
  
  <p>What am I doing wrongsomely? </p>
  
  <hr>
  
  <p>[Update] @sheilak gave a good anser : </p>
  
  <blockquote>
    <p>In order for the dropdown to defaulted to a non-blank value, the value
    of the variable passed to ng-model must equal one of the options
    passed to ng-options.</p>
    
    <p>In your case where ng-options is populated by values of
    campaign.title, it looks like the value passed to ng-model i.e.
    connectionsCampaignDropDown should be populated with
    $scope.connections[0].title rather than the whole object
    $scope.connections[0].</p>
    
    <p>$scope.connectionsCampaignDropDown = $scope.connections[0].title;</p>
  </blockquote>
  
  <p><strong><em>However</em></strong>, I would prefer to pass around an complete object, rather than just a field of it. </p>
  
  <p>Can this be done?</p>
  
  <p>(if not, then I will have to pass only the title to the ng-change function ShowConnectionsForCampaign() and it will then have to loop over the data to find a match, which seems inefficient)</p>