ng-click doesn't work on links created through jquery append

Question

If is use ng-click attribute of angular js script on statis links, it works well code shown below

<div class="modal fade" id="cModal" ng-controller="modalController">
  <li id="modalp1" class="active"><a ng-click="parentOptions()" href="#">Add Parent</a></li>
</div>

If sample link created dynamically through jquery append() or prepend() method, then click event doesnt work. sample code shown below.

$('#cpartners').prepend("<li><a ng-click=\"parentOptions()\" href=\"#\">Add Parents (Mother & Father)</a></li>");

Controller sample code shown below

function modalController($scope) {
  $scope.sthumbEdit = function() {
    $(".dur").show();
  };
  $scope.hthumbEdit = function() {
    $(".dur").hide();
  };
  $scope.parentOptions = function() {
  prepareParentOptions();
  };

  $scope.siblingOptions = function() {
   prepareSiblingOptions();
  };

  $scope.childOptions = function() {
   prepareChildOptions();
  };

}

Is there any way to enforce ng-click attribute works well on dyanmically generated links.

Answer 1

if you add html using jquery, you need to compile the content and inject it into the DOM. Something like

var element = $compile('<p>{{total}}</p>')(scope);

See "How Directives are compiled" section for an example http://docs.angularjs.org/guide/compiler