Dynamically add Buttons/directives in AngularJS/Ionic Framework

I try to implement the following example http://jsfiddle.net/ftfish/KyEr3/ in my ionic app based angularjs. Because of some problems the adding of buttons is not working. What can be the problem? Why does work the code on http://jsfiddle.net/ and notin my project?

    function MainCtrl($scope) {
    $scope.count = 0;
}

//Directive that returns an element which adds buttons on click which show an alert on click
myApp.directive("addbuttonsbutton", function(){
    return {
        restrict: "E",
        template: "<button class='button button-positive' addbuttons><i class='ion-plus-circled'></i> <br>Add Buttons</button>"
    }
});

//Directive for adding buttons on click that show an alert on click
myApp.directive("addbuttons", function($compile){
    return function(scope, element, attrs){
        element.bind("click", function(){
            scope.count++;
            angular.element(document.getElementById('space-for-buttons')).append($compile("<div><button class='button button-assertive' data-alert="+scope.count+">Show alert #"+scope.count+"</button></div>")(scope));
        });
    };
});

//Directive for showing an alert on click
myApp.directive("alert", function(){
    return function(scope, element, attrs){
        element.bind("click", function(){
            console.log(attrs);
            alert("This is alert #"+attrs.alert);
        });
    };
});

The call of the controller:

<section ng-controller="MainCtrl">
   <addbuttonsbutton></addbuttonsbutton>
   <div id="space-for-buttons">    
   </div>
</section>

The error via google crome console:

ionic.bundle.js:20306 Error: [ng:areq] Argument 'addButtonCtrl' is not a function, got undefined
http://errors.angularjs.org/1.3.13/ng/areq?p0=addButtonCtrl&p1=not%20a%20function%2C%20got%20undefined
    at REGEX_STRING_REGEXP (ionic.bundle.js:8762)
    at assertArg (ionic.bundle.js:10279)
    at assertArgFn (ionic.bundle.js:10289)
    at ionic.bundle.js:17130
    at ionic.bundle.js:16298
    at forEach (ionic.bundle.js:9030)
    at nodeLinkFn (ionic.bundle.js:16285)
    at compositeLinkFn (ionic.bundle.js:15777)
    at compositeLinkFn (ionic.bundle.js:15780)
    at compositeLinkFn (ionic.bundle.js:15780)(anonymous function) @ ionic.bundle.js:20306$get @ ionic.bundle.js:17256$get.Scope.$apply @ ionic.bundle.js:23201bootstrapApply @ ionic.bundle.js:10147invoke @ ionic.bundle.js:12884doBootstrap @ ionic.bundle.js:10145bootstrap @ ionic.bundle.js:10165angularInit @ ionic.bundle.js:10059(anonymous function) @ ionic.bundle.js:34824trigger @ ionic.bundle.js:11443eventHandler @ ionic.bundle.js:11713