Onchange event with AngularStrap select element

Question

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

Answer 1

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>