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>