ng-options is hiding the blank value with AngularJS V1.5

Question

I followed the instructions specified in the V1.3 documentation to have a default option in one of my selects.

Therefore in my Angular ̶1̶.̶3̶.̶1̶5̶ 1.5.7 template I have:

  <div class="form-group">
    <div class="col-md-12">
      <select ng-model="selectedObj" class="form-control"
              ng-options="obj.id as obj.name for obj in objects">
        <option value="">All objects</option>
      </select>
    </div>
  </div>

and in my controller I initialise it with:

$scope.selectedObj = '';
$scope.objects = [
  {
    id: '1',
    name: 'A',
  },
  {
    id: '2',
    name: 'B',
  },
  {
    id: '3',
    name: 'C',
  },
];

What happens is that the "All objects" option is not shown and instead the default "blank option" is shown and is only selectable the first time. The blank option is probably the one described here.

How can I make my default option work in place of the default one? What am I missing?

I've just found out the Angular version inside bower_components/angular/.bower.json is specified as 1.5.7 as opposed to what the main bower.json file specifies (which is 1.3.15).

May this be the cause for the seemingly weird behaviour?

Maybe the version is the problem. Because your example works for me: http://plnkr.co/edit/HogjHUQabrytcfFBYdmg?p=preview — SehaxX, Jul 06 '18 at 13:09
@SehaxX Weirdly enough the 1.5.7 [also seems to work](http://plnkr.co/edit/WjoR8kNqSbeBf8zNdkkX?p=preview). Hmm. — Shoe Diamente, Jul 06 '18 at 13:14
@ShoeDiamente have you other code in your controller that could break it. or do you override the selectedObj or so. — SehaxX, Jul 06 '18 at 13:23
@SehaxX The code I've pasted in the question is one that I've created ad-hoc for testing therefore no. Nothing changes `selectedObj` nor `objects` in my code. — Shoe Diamente, Jul 06 '18 at 13:24

score 0 · Answer 1 · answered Jul 06 '18 at 13:18

0

The problem is with your controller.

Don't initialize your $scope.selectedObj.

Updated controller:

$scope.objects = [
  {
    id: '1',
    name: 'A',
  },
  {
    id: '2',
    name: 'B',
  },
  {
    id: '3',
    name: 'C',
  },
];

Here is a working example:

https://stackblitz.com/edit/angularjs-twzxrk?file=home%2Fhome.html

answered Jul 06 '18 at 13:18

Surjeet Bhadauriya

6,755
3
34
52

As identified [in the comments](https://stackoverflow.com/questions/51211056/ng-options-is-hinding-the-blank-value#comment89403053_51211056) the version posted by me should work *with or without* `selectedObj`'s initialization. – Shoe Diamente Jul 06 '18 at 13:21

georgeawg · Answer 2 · 2018-07-06T14:26:32.377

Set the ng-model to null:

 ̶$̶s̶c̶o̶p̶e̶.̶s̶e̶l̶e̶c̶t̶e̶d̶O̶b̶j̶ ̶=̶ ̶'̶'̶;̶
 $scope.selectedObj = null;

The ng-option directive was heavily refactored in V1.4 and many bugs removed in V1.5. For more information, see

The DEMO

angular.module('app',[])
.controller("ctrl",function($scope) {
    $scope.selectedObj = null;
    $scope.objects = [
    {
        id: '1',
        name: 'A',
      },
      {
        id: '2',
        name: 'B',
      },
      {
        id: '3',
        name: 'C',
      },
    ];
})

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="ctrl">
     <select ng-model="selectedObj" class="form-control"
             ng-options="obj.id as obj.name for obj in objects">
        <option value="">All objects</option>
     </select>
</body>

ng-options is hiding the blank value with AngularJS V1.5

2 Answers2

The DEMO

Linked