ng-click inside of dynamically build template is not getting fired

Question

The ng-click in the following (shortened) code within the dynamically loaded template is not getting fired, while the ng-click inside of the default template in the last lines is! What can I do to get them both fired without isolating the scope of the directive?

index.html:

<myone model="mymodel"/>

directive:

angular.module('starter.directives', [])
  .directive('myone', function ($compile, data) {

  // We want to manipulate the DOM so we need a linker function.
  var linker = function(scope, element, attrs) {

    // Wait for the data object to be initialized asynchronously.
    data.initialized.then(function(){
      // This template variable is shortened in this snipped and would normally
      // be build up regarding to the structure of the initialized data object.
      // It further contains a lot of variables from the not isolated scope (e.g.
      // mymodel).
      template =
              '<span class="input-label">{{varInScope}}</span>'
            + '<input type="text" ng-model="' + attrs.model + '" />'
            + '<button ng-click="varInScope = varInScope +1" />';
            // The ng-click above never fires :(

      // compile the expressions and append the new DOM node to this directives element.
      var child = $compile(template)(scope);
      element.append(child);
    };
  };

  return {
      restrict: "E",
      link: linker,

      // need the parent scope instead of a isolated scope because in the template
      // build up above are {{vars}} referenced from it.
      scope: false,

      // Cant use template function instead of the linker function above for
      // dynamically building the template because it's content is unknown and
      // not available on startup (Have to wait for the data object). 
      template: '<div ng-click="thisWorksWhateverIdo()">template</div>'
  };
});