Why does select option using angularJs show first empty option?

Question

When I reload the page, the first option is always empty. I want the option containing text Any Make to be the default select option. Here is the code for my view:

  <select class="form-control" id="make" name="make" ng-init="Any Make" ng-model="makeSelected" ng-change="makeChanged()">
      <option value="0" selected="selected"> Any Make</option>
      <option ng-repeat="obj in makeData" value="{{obj.make_id}}"> {{ obj.make_name | uppercase }} </option>
  </select>

here is my controller code:

.controller("homeController", function ($scope, makeData, $http) {

            $scope.makeData = makeData;

            $scope.makeChanged = function () {
                $http({
                    method: "GET",
                    url: "homeService.asmx/GetModelById"})
                    .then(function (response) {
                        $scope.modelData = response.data;
                })
            }
        })

Answer 1

just remove ng-init and in your model give default value

   $scope.makeSelected = 0;

Here is a running fiddle for your code Click here

Fiddle for code with dynamic data Click here

Answer 2

If you aren't going to use ngOptions , at least get rid of that ng-init since it isn't a function, and in the controller function set $scope.makeSelected = 0 ;

Then you can remove the selected="selected" on that initial option, since the angularJS code will be handling what is selected.

See a demonstration below:

 angular.module('app', []) .value('makeData', [{ "make_id": 1, "make_name": "cat" },{ "make_id": 2, "make_name": "dog" },{ "make_id": 6, "make_name": "monkey" }]) .controller("homeController", function($scope, makeData, $http) { //initialize the value associated with ng-model on the select list $scope.makeSelected = 0; $scope.makeData = makeData; $scope.makeChanged = function() { console.log('makeChanged'); //$http() request removed because we don't have access outside this domain for AJAX requests. }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="homeController"> <select class="form-control" id="make" name="make" ng-model="makeSelected" ng-change="makeChanged()"> <option value="0"> Any Make</option> <option ng-repeat="obj in makeData" value="{{obj.make_id}}"> {{ obj.make_name | uppercase }} </option> </select> <div>makeSelected: {{makeSelected}}</div> </div>