Angular using ng-bind-html and ng-model together in select dropdown? - angularjs

Question

Is it possible to use ng-bind-html and ng-model together on the same select dropdown? In my application I have a select dropdown that gets populated with ng-bind-html (which is working fine) but when I try to bind the value of the dropdown to the $scope with ng-model, it isn't updating the scope with the value of the dropdown, it just stays the same as the original declaration in my controller. Here is what it looks like:
<select id="newNumOfPlayers" ng-bind-html="compiledSelect" ng-model="newNumOfPlayers"></select>
I declare my variable at the start of my controller
$scope.newNumOfPlayers = 0;
And here is where I populate my select string
$scope.compiledSelect = "";
var contentSelectString = "";
for (i = 1; i <= data[0].noOfPlayersNeeded; i++) {
contentSelectString += "<option value="+i+">"+i+"</option>";
}
$scope.compiledSelect = $sce.trustAsHtml(contentSelectString);
but this always logs as 0
console.log("new number "+$scope.newNumOfPlayers);
Anyone have any ideas? Thanks

Answer 1

Is there any reason why you are using ng-bind-html instead of ng-options?
Here is a reasonably clean way to do this with just a number input:
First we create a filter that creates an array with numbers equal leading up to your threshold (number of players needed)
app.filter('range', function() {
return function(input, min, max) {
min = parseInt(min); //Make string input int
max = parseInt(max);
for (var i=min; i<=max; i++)
input.push(i);
return input;
};
});
Next up we use ng-options combined with our filter to populate the select
<select ng-model="newNumOfPlayers" ng-options="n for n in [] | range:1:noOfPlayersNeeded"></select>
Now newNumberOfPlayers should be updated correctly and the range filter doesn't pollute your controller and can be used whereever you need it. Please note that noOfPlayersNeeded should be in your scope.