Why I can't use ng-click into jQueryDialog

Question

I want to create a div who can change the background dynamically with jquery and angularjs.

When I click on the text inside background, it open a new windows (Jquery ui Dialog) and I can choose another background image.

When I click on the image, I would like change background!

I have two questions:

Why I can't use ng-click into dialog dynamic content?

I have a dialog with dynamic data:

$( "#dialog" ).load( item+".html" ).dialog( "open" );

The data that have been loaded:

<img  ng-controller="BackgroundCtrl" src="http://etickets.dev10.dev.infomaniak.ch/images/templates/background.jpg" width="20%" height="20%" ng-click="changeBackground.doClick('http://etickets.dev10.dev.infomaniak.ch/images/templates/background.jpg')" />

When I put data direclty into dialog div, I use ng-click directive.

The second questions is:

When I click, I update

$scope.BackGroundImage

Why the div don't change his background image?

The full exemple is here:

http://plnkr.co/edit/?p=streamer&s=og6gLDAeSNgi6clQ

Answer 1

As I understand it you are trying to build dynamic HTML with jQuery and expect Angular to understand it.

That does not work. Angular needs to know about everything that is going on, so building content "outside" of Angular is a problem.

To tell Angular about the new HTML content do something like:

$("#dialog").load(item+".html", function () {
  var $this = $(this);
  var html = $this.html();
  var angularCompiled = $compile(html)($scope);
  $this.html(angularCompiled);
}).dialog("open");

This is only theory and there are probably other ways to do this also, but this gives you an idea.