AngularJS dropdownlist first value is empty

Question

I have a dropdown list and I'm using AngularJS as the frontend framework. However the first value in dropdownlist is always empty. Can anyone explain to me what happened? where I need to change? Thanks!

here is the html

 <div class="input-control select" ng-controller="democtrl">
            <select ng-model="selectedOption">
                <option selected>Select the option</option>
                <option value="ip">IP</option>
                <option value="host">Host</option>
            </select>
            {{selectedOption}}
        </div>

here is the js code:

 angular.module('demo')
      .controller('democtrl', ['$scope', function ($scope) {
            $scope.selectedOption = "test";

      }]);

your angular module definition does not have dependencies defined. Try changing it to angular.module('demo',[]). You can find the plunk here embed.plnkr.co/9SdR02Hro7ORz7zf20Ea — Pravin Umamaheswaran
– Pravin Umamaheswaran, Commented Mar 27, 2016 at 3:39

dev7 · Accepted Answer · 2016-03-27 03:37:13Z

4

That's because you don't have any html option with value test but you are setting the model to this value.

Try either leaving selectedOption empty or setting it to the an existing value:

angular.module('demo')
      .controller('democtrl', ['$scope', function ($scope) {
            $scope.selectedOption = "ip";
      }]);

Hope this helps!

answered Mar 27, 2016 at 3:37

dev7

6,4196 gold badges36 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

catlovespurple Over a year ago

Thanks a lot! This does help! It saves my time! ;-)

dev7 Over a year ago

@catlovespurple Glad it does. Please mark as correct answer.

Collectives™ on Stack Overflow

AngularJS dropdownlist first value is empty

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related