Angular Directive

I'm having a little problem creating two buttons using angular directive only 1 is appearing. How do I solve this problem?

<div class="row">
<meu-painel class="col-md-2 painel-animado" titulo="{{foto.titulo}}" ng-repeat="foto in fotos | filter: filtro">
    <minha-foto url="{{foto.url}}" titulo="{{foto.titulo}}"></minha-foto>
    <meu-botao-editar href="/fotos/edit/{{foto._id}}" nome="Editar"></meu-botao-perigo>
    <meu-botao-perigo acao="remover(foto)" nome="Remover"></meu-botao-perigo>
</meu-painel>

angular.module("minhasDiretivas", []).directive("meuPainel", function(){

    var ddo = {};

    ddo.restrict = "AE"; /* Tipo que pode ser usado: Atribute ou Element*/

    ddo.scope = {
        titulo : "@"
    }

    ddo.transclude = true; /* Configura para manter elementos filhos*/

    ddo.templateUrl = "js/directives/meu-painel.html";  /* Caminho da view*/

    return ddo;
})
.directive("minhaFoto", function() {

    var ddo = {};

    ddo.restrict = "AE";

    ddo.scope = {
        url : "@url",
        titulo : "@titulo"
    };

    ddo.template = "<img class='img-responsive center-block' src='{{url}}' alt='{{titulo}}'>";

    return ddo;
}).
directive("meuBotaoEditar", function(){

    var ddo = {};

    ddo.restrict = "AE";

    ddo.scope = {
        href : "@",
        nome : "@"
    }

    ddo.template = '<a href="{{href}}" type="button" class="btn btn-primary btn-block">{{nome}}</a>'

    return ddo;
})
.directive("meuBotaoPerigo", function() {

    var ddo = {};

    ddo.restrict = "AE"

    ddo.scope = {
        nome : "@",
        acao : "&"
    }

    ddo.template = '<button class="btn btn-danger btn-block" ng-click="acao()">{{nome}}</button>';

    return ddo;
});