Disabling submit button based on fields added with ng-bind-html

JSFiddle here: http://jsfiddle.net/c6tzj6Lf/4/

I am dynamically creating forms and buttons and want to disable the buttons if the required form inputs are not completed.

HTML:

<div ng-app="choicesApp">
  <ng-form name="choicesForm" ng-controller="ChoicesCtrl">
    <div ng-bind-html="trustCustom()"></div>
    <button ng-repeat="button in buttons" ng-disabled="choicesForm.$invalid">
      {{button.text}}
    </button>
  </ng-form> 
</div> 

JavaScript:

angular.module('choicesApp', ['ngSanitize'])
  .controller('ChoicesCtrl', ['$scope', '$sce', function($scope, $sce) {
    $scope.custom = "Required Input: <input required type='text'>";
    $scope.trustCustom = function() {
      return $sce.trustAsHtml($scope.custom);
    };
    $scope.buttons = [
      {text:'Submit 1'},
      {text:'Submit 2'}];
}]);

choicesForm.$invalid is false and does not change when entering text into the input field.

Solution:

I ended up using the angular-bind-html-compile directive from here: https://github.com/incuna/angular-bind-html-compile

Here is the relevant bit of working code:

<ng-form name="choicesForm">
  <div ng-if="choices" bind-html-compile="choices"></div>
  <button ng-click="submitForm()" ng-disabled="choicesForm.$invalid">
    Submit 
  </button>
</ng-form>

And choices might be a snippit of HTML like this:

<div><strong>What is your sex?</strong></div>
<div>
  <input type="radio" name="gender" ng-model="gender" value="female" required>
  <label for="female"> Female</label><br>
  <input type="radio" name="gender" ng-model="gender" value="male" required>
  <label for="male"> Male</label>
</div>