jquery $('div').html not working with third party modules (Angular)

Question

I am having trying to show content of a <div id="right"> when a mouse is hovered on another div. #right contains a graph from Angular-charts (http://jtblin.github.io/angular-chart.js/).

Here is my jQuery:

                    <div>
                       <div>
                          <canvas id="doughnut" class="chart chart-doughnut" data="data" labels="labels" legend="true" click="onClick">
                          </canvas>
                       </div>
                       <h3>Some text</h3>
                    </div>

I tried implementing this to show in #right when hovered over my other div in my jQuery.

 $(function(){

          $('#some_other_div').on('mouseover', function(){
            $('#right').html('<div><canvas id="doughnut" class="chart chart-doughnut" data="data" labels="labels" legend="true" click="onClick"></canvas></div><h3>Some text</h3>');
            })     
    });

When hovering on some_other_div, Only a blank space and Some text shows at the bottom. I made sure the graph works elsewhere when implementing it directly in HTML. Only facing this problem through .html.

Is there a way to fix this? Thank you.

If you're using angular then you should check some things that doesn't play well with it, like using jquery in the bad way, you should use it the angular way — Jonathan Solorzano, Sep 30 '15 at 04:06
Check out [this post](http://stackoverflow.com/questions/32682145/how-to-use-jquery-plugins-when-using-angular-js) (Don't care about the -1, read the content) i posted some links to understand it. — Jonathan Solorzano, Sep 30 '15 at 04:12

score 0 · Answer 1 · answered Sep 30 '15 at 05:57

Changing the html outside the Angular system doesn't tell Angular that the DOM is changed for it to act. Try doing the change via $apply() function.

angular.element("#some_other_div").scope().$apply($('#right').html('<div><canvas id="doughnut" class="chart chart-doughnut" data="data" labels="labels" legend="true" click="onClick"></canvas></div><h3>Some text</h3>');)

jquery $('div').html not working with third party modules (Angular)

1 Answers1