AngularJS: why does my dropdown have an initial blank entry?

Question

I am fetching some JSON frm a server and using it to populate a combobox.

A JSON entry looks like this

    "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"

And I declare my drop down thus-wise

<select name="SelectCampaignForConnections" 
 ng-model="connectionsCampaignDropDown" 
 ng-options="campaign.title for campaign in campaigns"  
 ng-change="ShowConnectionsForCampaign(connectionsCampaignDropDown)">

I initialize the model of the select ...

    $http.get(url)   
        .success(function(data, status, headers, config) 
            {
               if ($scope.connections.length > 0)
                   $scope.connectionsCampaignDropDown = $scope.connections[0];

When the dropdown shows, it contains the title element of each JSON entry, BUT, it has an initial blank entry.

What am I doing wrongsomely?

---

[Update] @sheilak gave a good anser :

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.

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].

$scope.connectionsCampaignDropDown = $scope.connections[0].title;

However, I would prefer to pass around an complete object, rather than just a field of it.

Can this be done?

(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)

Answer 1

<select name="SelectCampaignForConnections" 
    ng-init="justGiveItAName=getInitialSelection()"
    ng-model="justGiveItAName" 
    ng-options="campaign.title for campaign in campaigns"  
    ng-change="ShowConnectionsForCampaign(justGiveItAName)">

where getInitialSelection() is a function on your scope that could take a param if you need it to, but I would probably go with something like this in the case you outline above:

function getInitialSelection() {return connections[0]};

or set it directly in the ng-init:

ng-init="$scope.connections[0]"

(you might have to fiddle with the above code - I haven't tested it).

btw - 'justGiveItAName' is then an object available elsewhere.

I have now tested it; see these Fiddles for working examples:

Setting directly in ng-init: http://jsfiddle.net/lukkea/nuo2c3Lk/

Using a function on the $scope: http://jsfiddle.net/lukkea/o6strxjf/

Passing the object instead of properties (as the OP requested): http://jsfiddle.net/lukkea/fsx8s67j/2/

Passing the objects in and object back: http://jsfiddle.net/lukkea/ww9yqsrm/3/

Answer 2

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.

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].

$scope.connectionsCampaignDropDown = $scope.connections[0].title;