How To Bind Ng-click To A Html Block Inserted Inside Of A Directive Embedded Html Block

Plnkr: http://plnkr.co/edit/6xe46opL2kpgQrf7VaEu?p=preview I have a ng-click='switchCurreny() function that I'm trying to get working on an block of HTML that is placed inside of a

Solution 1:

I think you basically have to recompile after you have inserted new html code, because angular just inserts the new code into your div as far as I understand it and doesn't compile it.

It seems to me like the proper way would be to create a directive that handles your recompile. A possible solution has been discussed here: http://jesusjzp.github.io/blog/2014/07/30/compile-ngbind-angularjs/

Here is an excerpt from the link above (if the link ever dies) that shows how it is supposed to look like:

HTML:

<div ng-bind-html="details"do-compile="scope"></div>

JS:

angular.module('yourAppName')
  .directive('doCompile', ['$compile', function ($compile) {
    returnfunction(scope, element, attrs) {
      var selectedScope = attrs.doCompile && scope.$eval(attrs.doCompile);
      if (!element.hasClass('compiled')) {
        element.addClass('compiled');
        compile(element.contents())(selectedScope || scope);
      }
    };
}]);