AngularJS: ng-bind-html doesn't work with button tag

angularjs, javascript

Solution

For some reason your html tag is mark as `unsafe` by angular js. If you sure that your snippet text is safe, you can `$sce.trustAsHtml` it before adding it to the `$scope.snippet`.

app.controller('yourCtrl', ['$scope', '$sce', function($scope, $sce){
    $scope.add = function(){
        var text = "<input type='button' value='Test'><b>Test 2</b>";

        // mark it as clean
        text = $sce.trustAsHtml(text);

        $scope.snippet = text;
    };
}]);

Problem

I am having problem to print out an input type button dynamically in a div "ng-bind-html". HTML template: ``` <input type="button" value="Add" ng-click="add()"> <div ng-bind-html="snippet"></div> ``` Controller: ``` $scope.add = function() { $scope.snippet = "<input type='button' value='Test' ng-click='myFunc()'><b>Test 2</b>"; } ``` The tag input is removed and then I see just the "bold" text Test 2. Thanks

Original source