Utilização da animação com a diretiva

Pessoal,

Percebi que ao colocar as classes col-md-2 e painel-animado dentro da diretiva que foi criada para simplificar a exibição do painel ("meu-painel"), a animação para de funcionar. Vejam o código:

<!-- código onde a animação não funciona -->
<!-- página principal index.html -->
            <div class="row">
                <meu-painel ng-repeat="foto in fotos | filter : {titulo: filtro}" titulo="{{foto.titulo}}">
                    <img class="img-responsive center-block" src="{{foto.url}}" alt="{{foto.titulo}}">
                </meu-painel>                
            </div>

<!-- template meu-painel.html -->
        <div class="panel panel-default col-md-2 painel-animado">
            <div class="panel-heading">
                <h3 class="panel-title text-center">{{titulo}}</h3>
            </div>
            <div class="panel-body" ng-transclude>
            </div>
        </div>

Se eu retirar as classes col-md-2 e painel-animado do template, colocando diretamente no elemento meu-painel, no index.html, a animação passa a funcionar:

<!-- código onde a animação funciona -->
<!-- página principal index.html -->
            <div class="row">
                <meu-painel class="col-md-2 painel-animado" ng-repeat="foto in fotos | filter : {titulo: filtro}" titulo="{{foto.titulo}}">
                    <img class="img-responsive center-block" src="{{foto.url}}" alt="{{foto.titulo}}">
                </meu-painel>                
            </div>

<!-- template meu-painel.html -->
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title text-center">{{titulo}}</h3>
            </div>
            <div class="panel-body" ng-transclude>
            </div>
        </div>

Por que isso acontece e de que forma eu poderia incluir essas classes no meu template?