var app = angular.module('myApp', []); app.controller('myCtrl', ['$scope', '$compile', function($scope, $compile) { $scope.textOfDOM = 'Text show successfully'; $scope.addDOM = function() { var DOMToAdd = $('<p>{{textOfDOM}}</p>'); //Wrong code -- start $('#DOMWrapper').append(DOMToAdd); //Wrong code -- end //Right code -- start //var linkOfDOMToAdd = $compile(DOMToAdd); //var nodeOfCompiledDOM = linkOfDOMToAdd($scope); //$('#DOMWrapper').append(nodeOfCompiledDOM); //Right code -- end }; }]);
<div ng-app="myApp"> <div id='DOMWrapper' ng-controller="myCtrl"> <button ng-click='addDOM()'>Add DOM</button> </div> </div>