ng-click in compiled directive not working - angularjs

Question

The function tied to the ng-click event is never fired. The ng-click is inside a directive bootstrapped with $compile. Does anybody know why the click event never fires? The function is visible on the scope. A working plunker is provided. The code is as follows:
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope) {
$scope.datum = new Date('2015-05-01');
});
var link = function($compile) {
return function(scope, element, attributes, form) {
scope.opened = false;
var tag = '<span class="input-group-btn">' +
'<button type="button" class="btn btn-default" ng-click="open($event)">' +
'<i class="glyphicon glyphicon-calendar"></i>' +
'</button>' +
'</span>';
console.log(scope.opened)
element
.removeAttr('szp-date')
.attr('datepicker-popup', "")
.attr('is-open', "opened")
.wrap('<p class="input-group" style="width: 10em"></p>')
.after(tag);
$compile(element)(scope);
};
};
var forminput = function($compile) {
return {
restrict: "A",
require: "^form",
controller: function($scope) {
$scope.open = function($event) {
// This never gets fired
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
console.log(scope.opened);
};
},
link: link($compile)
};
};
app.directive("szpDate", forminput);
EDIT:
It is interesting that modifying the input tag as follows:
element
.removeAttr('szp-date')
.attr('datepicker-popup',"")
.attr('is-open', "opened")
// added this line of code
.attr('ng-click', 'open($event)')
.wrap('<p class="input-group" style="width: 10em"></p>')
.after(tag);
produces a clickable input element, but this is not what I want to achieve. I want the button to be clickable.
Edit 2:
More interestingly, I seem to have got it working if i modify this line.
.after(tag)
with
.after($compile(tag)(scope));