javascript - Preselected option by ng-init doesn't work in ngOptions | AngularJS -

i have object product = {id: "759", name: "somename", category_id: "139", cartridge_type: 2 ...} in angular controller.

why preselected option in ngoptions doesn't work? select renders empty option if product.cartridge_type null.

html

<select class="form-control"         id="cartridge_type"         name="cartridge_type"          ng-init="product.cartridge_type=product.cartridge_type||cartridgetypescope[0]"         ng-model="product.cartridge_type"         ng-options="cartridge_type.id cartridge_type.name cartridge_type in cartridgetypescope">      <option value="">select type</option> </select> 

js

$http.get('someapipath').success(function(data) {     $scope.product = data[0];     console.log( $scope.product ); });  $scope.cartridgetypescope = [     {         id: 0,         name  : '-'     },     {         id: 1,         name  : 'cartridgetype1'     },     {         id: 2,         name  : 'cartridgetype2'     } ] 

just simple use cartridgetypescope[0].id in ng-init

ng-init="product.cartridge_type=product.cartridge_type||cartridgetypescope[0].id" 

thing using cartridge_type.id cartridge_type.name expecting id in select in ng-init providing complete object (cartridgetypescope[0]). not selecting option value.

alternatively can can use same ng-init remove cartridge_type.id as ng-options

ng-init="product.cartridge_type=product.cartridge_type||cartridgetypescope[0]"   ng-options="cartridge_type.name cartridge_type in cartridgetypescope" 

hope :)

update

for controller default option need

  $scope.product={     "cartridge_type":2   } 

upadte 2:- $http:-

plunker