Directive and DOM event handling in AngularJS?

Question

Angular

There is a directive that has a mousedown event

function evClick() {
    return {
        restrict: "AE",
        link: function (scope, element) {
            element.bind('mousedown', function (event) {
                console.log("mousedown");
            });
        }
    };
}

Let's add a part of the html code that contains our directive

angular.element(document.getElementById('foo')).append("<h2 ev-click>add element</h2>");

The directive does not work in the added code
How can I make the directive work in the added element?
Example
plnkr.co/edit/nUasLau3vv4WvMINMNT9?p=preview

Answer 1

Angular does not know how to parse HTML on every change by the user. If you need to dynamically generate templates, then you should use the $compile service:
Example on plnkr

Answer 2

If Angular.js isn't critical, here's an Angular Light example.