Manwal
Manwal

Reputation: 23816

Angular set selected option not working

I want to set selected Audio option but its not working. Following is my HTML:

<form ng-app='test' ng-controller='testController'>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <select class="form-control" ng-model='event.type'>
        <option disbaled> Select</option>
        <option>IM</option>
        <option>Audio</option>
    </select>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

JS:

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

testApp.controller('testController', function ($scope) { 
    $scope.event.type = 'Audio';//not working
});

Fiddle DEMO

Any idea?

Upvotes: 1

Views: 446

Answers (2)

Keshav
Keshav

Reputation: 831

There is syntax error in your code while declaring object event.Right syntax is given below.

testApp.controller('testController', function ($scope) { 
    $scope.event ={};
    $scope.event.type = 'Audio';//not working
});

You have to use ng-selected directive of angular to make any option selected by default.

<option disbaled> Select</option>
<option>IM</option>
<option ng-selected="true">Audio</option>

Upvotes: 2

PavanAsTechie
PavanAsTechie

Reputation: 322

Use

$scope.event = {} as below

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

testApp.controller('testController', function ($scope) { 
    $scope.event ={};
    $scope.event.type = 'Audio';//not working
});

OR

testApp.controller('testController', function ($scope) { 
    $scope.event = {'type':'Audio'};//not working
});

JSFIDDLE

Upvotes: 2

Related Questions