angularjs - Error with the initially selected option in a select -

i having trouble getting initial option of select box "selected" when page loads.

view code in plunker

as can see in plunker, selector blank when loads, deal model initialized default category value. i'm sure missing silly, why select box not have initial value?

view:

<p>category: {{deal.category.name}}</p>  <select ng-model="deal.category" ng-options="category.name category in categories"></select> 

controller:

app.controller("myctrl", function($scope) {    // object predefiend category.   $scope.deal = {"category":{"_id":"1","name":"music/media","value":1}};    // list of available categories   $scope.categories = [{"_id":"1","name":"music/media","value":1},{"_id":"2","name":"weather","value":2},{"_id":"3","name":"navigation"}]; }); 

---

update:

i created simplified version, actual data coming resources. controller looks bit more this:

$scope.deal = getdeal(); $scope.categories = category.query(); 

however, json in example same.

if implement davin tryon's or sza's examples have this:

$scope.categories = category.query(function() {   for(var = 0; < $scope.categories.length; i++) {     if($scope.categories[i]._id == $scope.deal.category._id) {       $scope.deal.category = $scope.categories[i];     }   } }); 

which seems little weird me, there way?

since angularjs needs detect equality of model object object in drop down list reference, need use same exact object pre-selected item rather creating new object.

this fix code:

$scope.categories = [{"_id":"1","name":"music/media","value":1},{"_id":"2","name":"weather","value":2},{"_id":"3","name":"navigation"}]; $scope.deal = {"category":$scope.categories[0]};