Event binded to dynamically generated HTML get called automatically

Question

I am trying to bind event to dynamically generated html in AngularJs controller, but I can't. I found following code snippet

var div = angular.element("del-" + input.name);
div.bind('onclick', $scope.DeleteImage());

But it immediately calls the DeleteImage() function. I want to add deleteImage icon with functionality, to remove image from ImageuploadList. Any Idea, how to do that? Here is my code:

 function readImageURL(input) {
            if (input) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('#pageImageList').append('<span class="upload-image recent-images"> <a id="del-' + input.name + '" href="javascript:void(0);" class="glyphicon glyphicon-trash" ></a><img src="' + e.target.result + '" id="' + input.name + '" width="100%" height="100%"></span>')
                    var div = angular.element("del-" + input.name);
                    div.bind('onclick', $scope.DeleteImage());

                    $scope.imageUpload.push({
                        ImageUrl: e.target.result,
                        ImageName: input.name
                    });
                };
                reader.readAsDataURL(input);
            }
        }

Answer 1

Looking at code "div.bind('onclick', $scope.DeleteImage());", its actually calling the function.

Please check if you want to add "$scope.DeleteImage()" in single quotes