ng-click внутри шаблона динамической сборки не запускается

Щелчок ng в следующем (укороченном) коде в динамически загружаемом шаблоне не срабатывает, в то время как щелчок ng внутри шаблона по умолчанию в последних строках! Что я могу сделать, чтобы уволить их обоих, не изолируя область применения директивы?

индекс.html:

<myone model="mymodel"/>

директива:

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>'
  };
});