not able to get ng-bind-html dropdown value on ng-click function

Question

i new to Angularjs i can do this in Jquery but i want to learn angularjs .

i have dropdown were im using ng-bind-html to get dropdown value and updating that value to that ng-bind-html it is working fine. but when i select the value from dropdown and console it in console log it is showing as null.

but when i update the dropdown with hardcode value and select the value then it is coming correctly on log.

HTML Code:

<div ng-app="myApp">
<div ng-controller="addComplaintCtrl">
 <select class="form-control" id="product_name" name="product_name" ng-model="product_name" ng-bind-html="pdl">
     <!--<option value="">-Select-</option>
     <option value='00'>Other</option>-->
  </select>
  <input type="button" class="btn btn-primary btn-block" ng-click="complaintSubmitEvent();" value="Submit Complaint">
 </div> 

 </div>

Angular Code:

<script>
  var app = angular.module('myApp',['ngSanitize']);

  app.controller("addComplaintCtrl",function($scope,$sce){

  $scope.pdl=$sce.trustAsHtml('<option value="">-Select-</option><option value="Sales" >Sales</option>');

  $scope.complaintSubmitEvent=function(){
        //alert(0);
        console.log($scope.product_name);

  }

  })
  </script>

below is jsfiddle link. ng-bind-html

Answer 1

You have to compile the change made by ng-bind-html you can create a directive something like

app.directive('compile',function($compile, $timeout){
    return{
        restrict:'A',
        link: function(scope,elem,attrs){
            $timeout(function(){                
                $compile(elem.contents())(scope);    
            });
        }        
    };
});

$timeout is used to run compile function, after ng-bind-html do its job

Now you can just simply put compile as attribute of select with ng-bind-html

<select class="form-control" id="product_name" name="product_name" ng-model="product_name" ng-bind-html="pdl" compile >

Working fiddle

Answer 2

You can also dynamically add options to select using ng-repeat if you do not want to use ng-bind-html . Here is the working code:

<div ng-app="myApp">
<div ng-controller="addComplaintCtrl">
<select class="form-control" id="product_name" name="product_name" ng-model="product_name">
      <option ng-repeat="d in dropdownData" value="{{d.value}}">{{d.name}}</option>
</select>
<input type="button" class="btn btn-primary btn-block" ng-click="complaintSubmitEvent();" value="Submit Complaint">
</div>     
</div>

<script>
    var app = angular.module('myApp',['ngSanitize']);

    app.controller("addComplaintCtrl",function($scope,$sce){
    $scope.dropdownData = [{name:'-select-', value:''},{name: 'sales', value:'sales'}];

    $scope.complaintSubmitEvent=function(){
        //alert(0);
        console.log($scope.product_name);

    }
});
</script>

Fiddle