AngularJS two way data binding not working after my html added new inner html

Question

I have a html

<div id="doc1"></div>

after that I add add new html inside id "doc1"

document.getElementById("doc1").innerHTML = '<div id="doc2">{{ value }}</div>';

accurately there should be

<div id="doc1"><div id="doc2">{{ value }}</div></div>

but {{ value }} not working to bind

this my JS code

(function () {
    angular
    .module('myApp')
    .controller('MyController', myController);

    function myController($scope){
      Initial();
    
      function Initial(){
         document.getElementById("doc1").innerHTML = "<div id="doc2">{{ value }}</div>";
         $scope.value = "Hi There";
      }
    }
}) ();

document.getElementById() and .innerHTML have nothing to do in an Angular app. It is out of "Angular's world". Selecting elements by ID and adding text to them is not how Angular works. — Jeremy Thille
– Jeremy Thille, Commented Mar 2, 2021 at 8:55

Nitheesh · Accepted Answer · 2021-03-02 08:29:47Z

0

Try to use ngBindHtml docs

in template

<div id="doc1" ng-bind-html="htmlData"></div>

in controller

$scope.htmlData = "<div id="doc2">{{ value }}</div>";
$scope.value = "Hi There";

answered Mar 2, 2021 at 8:29

Nitheesh

20.1k3 gold badges28 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Benji99 Over a year ago

I do follower you answer but result still same, {{ value }} not bind

Collectives™ on Stack Overflow

AngularJS two way data binding not working after my html added new inner html

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related