javascript - Angularjs add validation to dynamic fields using $compile -

am trying add required input element in form. however, form dynamic.if put element manually in page works,but if use $compile doesn't work.

my html:

<div style="padding-left:20px; padding-right:20px"> <ng-form name="myform">                  <div id="appendhere"></div>                   <button   type="submit" ng-disabled="myform.$invalid"  class="btn btn-primary">save</button>              </div>      </div> </ng-form></div> 

my controlles js:

'use strict';  myapp.controller("compilecontroller", ["$scope", "$compile",      function ($scope, $compile) {  var $result = $("<ng-form name='form'><div class='form-group'><h5><label class='col-xs-2 col-form-label'>absence status</label></h5><div class='col-xs-10'><input class='form-control' required  name='absencestatus' type='text' ng-model='requestl.absencestatus'/></div></div></ng-form>").appendto(angular.element("#appendhere"));           $compile($result)($scope);    }]); 

any highly appreciated. using angularjs 1.5.8.

thx,

you can try following code in controller. worked me. 1 possible solution put 0 second $timeout-function

var $result = "<ng-form name='form'><div class='form-group'><h5><label class='col-xs-2 col-form-label'>absence status</label></h5><div class='col-xs-10'><input class='form-control' required  name='absencestatus' type='text' ng-model='requestl.absencestatus'/></div></div></ng-form>"; var content = $compile($result)($scope); console.log(content); $timeout(function(){       var tempelement = document.createelement('div');       tempelement.innerhtml = content[0].innerhtml;            document.getelementbyid('appendhere').appendchild(tempelement.firstchild);     }); 

here example in jsfiddle well.