javascript - i am getting issue in changing inner html of div -

guys found problem in changing html of div please me

document.getelementsbyclassname("lab")[0].setattribute("ng-bind-html", "binds");  $scope.binds="<h1>run</h1>"; 

i setting attribute ng-bind-htmlin java script because have have integrated plugin in code in div of class="lab" getting declared through javascript. attribute binds attached checked in inspect element. in fact when ever attached property of ng-bind-html in javascript ng-bind-html not work correct way it. ther no error in code. me please

basically have added ng-bind-html attribute dynamically, add directive attribute dom ng-bind-html directive wouldn't evaluated html content. need recompile dom using

$compile(document.getelementsbyclassname("lab")[0])($scope) 

to making sure should work need add ngsanitize module in angular app.

demo plunkr

the way doing not standard way of doing dom manipulation in angularjs. standard approach keep ng-bind-html attribute there in html rather adding dynamically.

standard way

html

<h1>cleaner way</h1> <pre ng-bind-html="binds"></pre> 

code

(function(angular) {   'use strict';   angular.module('bindhtmlexample', ['ngsanitize'])     .controller('examplecontroller', ['$scope', '$compile', function($scope, $compile) {       $scope.binds="<h1>run</h1>";      }]); })(window.angular); 

plunkr