Angular ng-options remove blank option and select the first option only

Question

I am using AngularJS to populate my select options content dynamically from an array of objects in my controller. My objects has a property named userProfileName.

How would it be possible to remove the blank option that I am getting at the top?

Also, I would want to select the first profile Profile 1 by default. How can this be done?

My Snippet of code is here:

<select id="requestorSite" 
                             ng-model="selectedUserProfile"
                             ng-options="userProfile.userProfileName for userProfile in userProfiles"
                             ng-selected=""
                             class="form-control displayInlineBlock width40per marginLeft15">
                            </select>

My controller has

$scope.userProfiles

As the array of object and each object has userProfileName attribute.

Below is the screen shot:

I would like to remove the blank option at the top and also have by default Profile 1 selected.

Thanks, Ankit

Solution

Do this :)

In your controller :

 function myCtrl ($scope) {
   $scope.userProfiles = [
     {id: 10, name: 'Carton'},
     {id: 27, name: 'Bernard'},
     {id: 39, name: 'Julie'},
  ];

   $scope.selectedUserProfile= $scope.userProfiles[0]; // Set by default the   value "carton"
  };

In your page :

      <select  id="requestorSite" ng-model="selectedUserProfile" ng-options="userProfile as userProfile.name for userProfile in userProfiles">
            </select>

CodePen: http://codepen.io/anon/pen/qdOGVB

Comments

[Ankit Tanna]

Now I am looking for blank options problem

[carton]

Blank options problem ? This code put value in the select but he also put a default value, so the blank problems would be solved. Show us your code please.

[Ankit Tanna]

Its written on the top... pick your same example... you will also get blank option.

[carton]

If you put ng-model="myModel", this line remove the blank option : $scope.myModel= $scope.userProfiles[0];

[Ankit Tanna]

I did the same thing. $scope.selectedUserProfile = $scope.userProfiles[0].userProfileName; Still Not Working.

[carton]

Have a look to litle codepen, you will understand : codepen.io/anon/pen/qdOGVB

[Ankit Tanna]

You Rock buddy @carton Thanks... This Worked.