angular ng-bind-html

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-sanitize.min.js"></script>
<div ng-controller="foo">
    
    <div bind-unsafe-html="testHtml"></div>
    {{test}}
    
</div>

JavaScript

angular.module('myapp', ['ngSanitize'])
.controller('foo', function($scope,$sce) {
    $scope.testHtml =  $sce.trustAsHtml("<input type='text'  ng-model='test'>");
}).directive('bindUnsafeHtml', ['$compile', function ($compile) {
      return function(scope, element, attrs) {
          scope.$watch(
            function(scope) {
              // watch the 'bindUnsafeHtml' expression for changes
              return scope.$eval(attrs.bindUnsafeHtml);
            },
            function(value) {
              // when the 'bindUnsafeHtml' expression changes
              // assign it into the current DOM
              element.html(value);

              // compile the new DOM and link it to the current
              // scope.
              // NOTE: we only compile .childNodes so that
              // we don't get into infinite loop compiling ourselves
              $compile(element.contents())(scope);
            }
        );
    };
}]);

angular.bootstrap(document, ['myapp']);