Search code examples
angularjstwitter-bootstrap-3angular-strap

Onchange event with AngularStrap select element



I want to execute a function when the value of the select element changes (the select element in angular-strap is html tag)
My HTML:

 <button type="button" class="btn btn-default" ng-model="selectedCriteria" data-html="1" ng-options="choice.value as choice.label for choice in selectChoices" bs-select>
      Action <span class="caret"></span>
    </button>

My JS:

$scope.selectedCriteria = "Location";
$scope.selectChoices = [{'value':'Location','label':'<i class=\'fa fa-map-marker\'></i> Location'},
{'value':'Age','label':'<i class=\'fa fa-male\'></i> Age'}];

I tried putting an ng-click directive with a function in the controller but it captures the value of the current selected value on click not when the element changes

Thanks


Solution

  • There are a couple of options one is using ngChange Reference

    The other is using $watch. See the $watch section of the scopeapi reference

    An example using watch (this would be in your controller)

    $scope.$watch('selectedCriteria', function() {
         $scope.SomeFunction();
    });
    

    An example using ngChange

    <button type="button" class="btn btn-default" 
       ng-change="SomeFunction()"
       ng-model="selectedCriteria" data-html="1" 
       ng-options="choice.value as choice.label for choice in selectChoices" bs-select>
          Action <span class="caret"></span>
    </button>