AngularJS Select Box Set Default Selected Value on Document Ready

Question

I have a weird problem when setting the model value of a dropdown on Document ready event. I want Option4 to be selected on page load, However this doesn't seems to be reflected on my view when I do things as follows. Please see below code...

HTML

<select ng-model="search_for" class="form-control" id="search_for">
                    <option value="">-Search For-</option>
                    <option value="1">Option1</option>
                    <option value="2">Option2</option>
                    <option value="3">Option3</option>
                    <option value="4">Option4</option>
</select>

JS

angular.element(document).ready(function () {
$scope.search_for = 1;
}

Even when I do {{search_for}} in html it proves that model value is not set by showing nothing, but shows the value when dropdown value is changed.

What am I doing wrong ?.

Thank You.

instead of adding it on document.ready add at the starting in the controller, since the controller loads prior to view, the model value gets reflected — Sravan
– Sravan, Commented Dec 1, 2016 at 6:13
any reason why you can't use the "selected" tag provided in normal HTML to set what you want? Since it looks like it's hard-coded to set to a specific option anyway. Or do you just do everything in a new technology you are learning, ignoring all the other, already-built-in and easy to use standards? — zerohero
– zerohero, Commented Dec 1, 2016 at 6:17
Have you try with ng-init in select box ? otherwise please look here plnkr.co/edit/wTRXZYEPrZJRizEltQ2g?p=preview — Santosh Shinde
– Santosh Shinde, Commented Dec 1, 2016 at 6:17

Sravan · Accepted Answer · 2016-12-01 06:15:10Z

4

Instead of adding it on document.ready add at the starting in the controller, since the controller loads prior to view, the model value gets reflected

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="search_for" class="form-control" id="search_for">
                    <option value="">-Search For-</option>
                    <option value="1">Option1</option>
                    <option value="2">Option2</option>
                    <option value="3">Option3</option>
                    <option value="4">Option4</option>
</select> 

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.search_for = "2";
    
});
</script>

</body>
</html>

Please run the above snippet

Here is a working Demo

answered Dec 1, 2016 at 6:15

Sravan

18.7k3 gold badges33 silver badges54 bronze badges

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

3 Comments

Nimantha Harshana Perera Over a year ago

Thank you so much... !!! it works, but I don't understand why js can't manipulate and reflect the change on document ready. Can you please elaborate more... Cheers !!!

Sravan Over a year ago

The document.ready is also triggered only once when you load your index.html. It is not triggered when the partial templates defined in your route configuration are loaded.

Sravan Over a year ago

check this answer

Sajeetharan · Accepted Answer · 2016-12-01 06:19:52Z

You need to have ng-app and ng-controller for the app, without using document.ready

var app = angular.module('DemoApp', [])
app.controller('akuaController', function($scope) {
 $scope.search_for = "1";
  
});

<head>
  <script data-require="[email protected]" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>
  <link rel="stylesheet" href="style.css" />
</head>

<body ng-app="DemoApp"    ng-controller="akuaController">
  
  
  <select ng-model="search_for" class="form-control" id="search_for">
    <option value="">-Search For-</option>
    <option value="1">Option1</option>
    <option value="2">Option2</option>
    <option value="3">Option3</option>
    <option value="4">Option4</option>
  </select>
  

 </body>

</html>

Collectives™ on Stack Overflow

AngularJS Select Box Set Default Selected Value on Document Ready

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related