To update/use the HTML data(return from REST call) which is binded to view by using "ng-bind-html"

Question

part of view.html

  <div id="localResults" class="bucketLocalResultsDiv"
                ng-bind-html="content">
                <div
                    style="position: absolute; padding-left: 50%; padding-top: 25%;">
                    <img alt="" src="pages/images/load.gif"></img>
                </div>
            </div>

"content" is of HTML type which is fetch by controller by using REST call and then set to $scope.content.

What I want is :

to get the html element defined in the "content" and update it's attribute

to get the particular element defined in the "content" and use it's value/innerhtml to update some other element defined in the view page

Answer 1

ng-bind

ng-bind is a one way data binding, what you need to do is create a $scope variable to make 2-way data binding.

Create a controller and inject your service/factory ($http call). Then you can add the scope to the view and it should update as you update the scope in your controller hence 2-way databinding

Answer 2

As suggested here, use the $sce service to mark your HTML as trusted and update the HTML content. Here's a demo I put together. As shown, you can bind HTML, then get elements from your updated HTML and do all sorts of DOM manipulations as you please. The demo uses a dummy REST endpoint to get the HTML, but you get the point.