$compile containing function as attribute value - angularjs

Question

I'm facing one issue with $compile.
The code I've written is very big hence I'm create one small example to replicate this issue.
Suppose I've a button in my page.
When user clicks on that button, one more button will be created which will be having ng-click method as shown below:
$scope.showAlert = function(){
alert('pass');
}
$scope.createExample = function() {
var button = '<button type="button" ng-click="' + $scope.showAlert + '()">click</button>';
angular.element(document.body).append($compile(button)($scope));
}
HTML: <button type="button" ng-click="createExample()">test</button>
When user clicks on button, createExample() method will be invoked. This method will create another button which will be having ng-click. This ng-clicks holds a method which give alert.
I'm getting error below:
Error: Syntax Error: Token '{' is an unexpected token at column 12 of the expression [function (){
alert('pass');
}()] starting at [{
alert('pass');
}()].
at Error (native)
at throwError (https://code.angularjs.org/angular-1.0.1.js:5830:11)
at parser (https://code.angularjs.org/angular-1.0.1.js:5824:5)
at https://code.angularjs.org/angular-1.0.1.js:6387:29
at https://code.angularjs.org/angular-1.0.1.js:12493:18
at nodeLinkFn (https://code.angularjs.org/angular-1.0.1.js:4223:13)
at compositeLinkFn (https://code.angularjs.org/angular-1.0.1.js:3838:14)
at https://code.angularjs.org/angular-1.0.1.js:3750:30
at Object.$scope.createExample (http://fiddle.jshell.net/JKBbV/751/show/:44:65)
at https://code.angularjs.org/angular-1.0.1.js:6129:19 <button type="button" ng-click="function (){
alert('pass');
}()" class="ng-scope">
$compile is the only option i have.
How to make this work??
JSFiddle here

Answer 1

ng-click takes the handler name to execute, here you are evaluating the method content.
Correct code would simply be :
$scope.showAlert = function(){
alert('pass');
}
$scope.createExample = function() {
var button = '<button type="button" ng-click="showAlert()">click</button>';
angular.element(document.body).append($compile(button)($scope));
}