angularjs select the first value in select box

Question

I need to highlight the first value 'fullName' in select box using angularjs. I am using angularstrap selectbox.

controller,

  $scope.accountInfo.owners = [  
   {  
      "accounts":null,
      "phoneumber":null,
      "email":null,
      "fullName":"MITA DASGUPTA",
      "mobilePhoneNumber":null,
      "noteFlag":false,
      "number":130000000484
   }
]

Template,

<button type="button" class="btn btn-default" placeholder="Pleasae select" 
  data-ng-model="owner.fullName" 
  data-html="1" 
  bs-options="owner as owner.fullName for owner in accountInfo.owners"  
  bs-select>
    Action <span class="caret"></span>
</button>

I tried that way, but the value not selecting by default.

Answer 1

You should have some different ng-model name you already used owner in ng-options like selectedOwner

<button type="button" class="btn btn-default" placeholder="Pleasae select" 
  data-ng-model="selectedOwner" 
  data-html="1" 
  bs-options="owner as owner.fullName for owner in accountInfo.owners"  
  bs-select>
    Action <span class="caret"></span>
</button>

Then you need to set value of ng-model from controller.

$scope.selectedOwner = $scope.accountInfo.owners[0];

Answer 2

You forgot to initialize the model which is capturing the selected values. You usually achieve this with an ng-init but it is also possible to intialize your model in your controller with the first element of your array. (And the appropriate field).