ng-click functions not firing inside html select element - html

Question

I have the following html dropdown in an Angular view:
HTML
<select>
<option value="Func 1">
<button class="btn ui-button ui-widget ui-state-default ui-corner-all" ng-click="callFunc1()">
<span class="btn-icon add"></span>
Func 1
</button>
</option>
<option value="Func 2">
<button class="btn ui-button ui-widget ui-state-default ui-corner-all" ng-click="callFunc2()">
<span class="btn-icon add"></span>
Func 2
</button>
</option>
</select>
JS
$scope.callFunc1= function() {
alert('func 1');
};
$scope.callFunc2 = function() {
alert('func 2');
};
My problem is the functions attached to the ng-clicks aren't firing.
Can anyone tell me why?

Answer 1

I would suggest following something similar to this format. How you decide to pass around the data is completely up to you, but this should provide some guidance.
<div ng-controller="testCtrl">
<!--js-->
<script>
app.controller('testCtrl',function($scope){
$scope.selectValue = undefined;
$scope.event = function(){
console.log($scope.selectValue)
}
})
</script>
<div>
<select ng-model="selectValue" ng-change="event()">
<option value="test">something</option>
<option value="test2">something2</option>
</select>
</div>
</div>
Make sure all html is within your controller and that you've initiated the body of your html with ng-app (not shown above). ng-change will fire the expression that you pass it when you make a change to the select input. Also, ng-change requires that you assign an ng-model value to your element.