It's a sample about ng-change with checkbox.

plunker

I'd like to make the checkbox into a selection but failed. Here's the code:

<select>
  <option ng-model="confirmed" ng-change="change()">1</option>
  <option ng-model="confirmed" ng-click="change()">2</option>
</select>

If somebody could help I'll be appreciate.

It's a sample about ng-change with checkbox.

plunker

I'd like to make the checkbox into a selection but failed. Here's the code:

<select>
  <option ng-model="confirmed" ng-change="change()">1</option>
  <option ng-model="confirmed" ng-click="change()">2</option>
</select>

If somebody could help I'll be appreciate.

• javascript
• angularjs
• angularjs-ng-click
• angularjs-ng-change

• 1 those should be given to select element not option – Arun P Johny Commented Apr 9, 2015 at 2:54
• @ArunPJohny If every option do the different functions? – doreentseng Commented Apr 9, 2015 at 2:57
• in that case you can use a if...else/switch condition in the change handler to call other methods... – Arun P Johny Commented Apr 9, 2015 at 2:59
• You should bind the change event to the select box instead doing it for options. Somehting like - <select ng-change ="function_to_be_called()"> and in the function you can take the value of the option and invoke different functions. – Zafar Ahmad Commented Apr 9, 2015 at 5:07

4 Answers 4

You need to bind them to the select element not option

<select ng-model="confirmed" ng-change="change()">
    <option>1</option>
    <option>2</option>
</select>

I did it like this:

controller:

$scope.selectChange = function() {
    switch($scope.confirmed) {
      case '1': $scope.selected = '1';break;

      case '2': $scope.selected = '2';break;
    }
  }

html:

<select ng-model="confirmed" ng-change="selectChange()">
<option>1</option>
<option>2</option>
</select>

<p>{{selected}}</p>

plnkr: http://plnkr.co/edit/N85UYTeHwRInfp60ZLsJ?p=preview

You should put ng-click in select not in option

 <div class="input-group">
      <select class="form-control" placeholder="Type template" ng-model="eventID" ng-click="viewRuleByEvent(eventID)">
         <option value="" selected>Select Event</option>
         <option selected value="all">All Event</option>
         <option ng-repeat="event in events" value="{{event.id}}">{{event.name}}</option>
      </select>
 </div>

I did like this

<select ng-model="confirmed" ng-change="change()">
   <option value="1">1</option>
   <option value="2">2</option>
</select>