AngularJS ngOptions select default option

Question

I have the following select element that is dynamically populated using angular's ngOptions directive.

<select ng-options="group.parameterGroupId as group.name for group in parameterGroups" 
        ng-change="getParameterGroup(group.parameterGroupId)" 
        ng-model="group.parameterGroupId">
    <option value="">== Choose Group ==</option>
</select>

How can I programatically select the default == Choose Group == option later on, after another value in the dropdown has been selected?

I have tried setting $scope.group.parameterGroupId to null and to "" in my controller, neither of which worked as expected. In both cases, the option that was currently selected stays selected.

Using AngularJS v1.4.3.

Is this a duplicate of http://stackoverflow.com/questions/24411820/select-the-blank-option-of-select-box-programmatically-in-angularjs-directive? — Adam_O, Nov 12 '15 at 21:24

score 2 · Answer 1 · edited Nov 12 '15 at 22:00

2

Well, you could atribute some model to your defult option. Take a look:

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.options = [
        { desc: 'op1' },
        { desc: 'op2' },
        { desc: 'op3' }
    ]
    $scope.reset = function(){
     $scope.selected = $scope.default;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <select ng-options="op as op.desc for op in options" ng-model="selected">
    <option value="" ng-model="default">== Choose Group ==</option>
  </select>
    {{selected}}
    
    <br />
    <button ng-click="reset()">Reset!</button>
</div>

This should do the trick.

edited Nov 12 '15 at 22:00

simeg

1,889
2
26
34

answered Nov 12 '15 at 21:31

Italo Ayres

2,603
2
16
20

Thank you, this helped, but the heart of the problem was that my select was included in the page using an ngInclude, which creates a child scope for the template. – Andrew Mairose Nov 13 '15 at 15:19
But did you figured it out in the end? Or are you still trying? @AndrewMairose – Italo Ayres Nov 13 '15 at 20:55
I figured it out. I posted my solution in another answer. – Andrew Mairose Nov 13 '15 at 21:21

score 1 · Accepted Answer · answered Nov 13 '15 at 15:27

My problem was that my <select> was included in my page using the ngInclude directive. I discovered that the ngInclude directive actually creates a child scope for the template being included. So, to be able to set the selected group, I needed to make the ng-model of my select accessible from its parent scope.

I ended up incorporating @Italo Ayres's solution as well, to access the default value of my select. Here is my corrected markup, which uses $parent to access the parent scope of my template that my <select> is contained in.

<select ng-options="group.parameterGroupId as group.name for group in parameterGroups" 
        ng-change="getParameterGroup(group.parameterGroupId)" 
        ng-model="$parent.group.parameterGroupId">
    <option value="" ng-model="$parent.defaultGroup">== Choose Group ==</option>
</select>

Then in my controller, I set the selected group to the default like this.

$scope.group {
    parameterGroupId: $scope.defaultGroup
};

Note that I don't use $scope.group.parameterGroupId = $scope.defaultGroup because $scope.group may not be defined when this statement is reached.

AngularJS ngOptions select default option

2 Answers2