无法使用 Angular.js 将值动态设置到下拉列表中

Question

I am unable to set value dynamically into drop down list using Angular.js. Here is my code:

<div class="input-group bmargindiv1 col-md-12">
    <span class="input-group-addon ndrftextwidth text-right" style="width:180px">Business Name :</span>
    <select class="form-control" id="restau" ng-model="subcat" ng-options="qua.name for qua in listOfRestaurant | orderBy:'name' track by qua.value" ng-change="getDayFromSpecial('restau');">
      <option value="">Select Business Name</option>
    </select>
  </div>
  <input type="button" id="btn" value="Open" ng-click="openGallery();">
   <input type="button" id="btn1" value="select" ng-click="openSelect();">

My controller side code is given below.

$scope.openSelect=function(){
     $scope.subcat.value="1";
   }

Here I am trying to set value using button click but it's throwing error. Here is my plunkr code.

Answer 1

Because you haven't define $scope.subcat object yet & you're trying to assign value property of it.

$scope.subcat = {}; //define it inside controller
$scope.openSelect=function(){
   $scope.subcat.value = "1";
}

Forked Plunkr

Warning: as you're only setting value property of object, ng-options would select option for you in dropdown. But what about other property values. If you are assuming value as unique constraint & totally responsible entire record identity then its completely fine.