Erro na aula 4. Minimizando a complexidade do nosso HTML | AngularJS: crie webapps poderosas

Olá,

Estou finalizando a aula 4, porém estou recebendo o seguinte erro que não consigo descobrir qual é o problema: http://imageshack.com/a/img923/2766/F3jqnZ.png

Meus códigos (sorry estão cheios de comentários):

<!-- public/index.html -->
<!DOCTYPE html>
<!-- adicionado diretiva ng-app que chama o main.js dizendo que este é o escopo de atuação do Angular -->
<html lang="pt-br" ng-app="alurapic">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <title>Alurapic</title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/bootstrap-theme.min.css">
        <script src="js/lib/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
        <script src="js/main.js"></script>
        <script src="js/controllers/fotos-controller.js"></script>
        <script src="js/directives/minhas-diretivas.js"></script>
    </head>
    <!-- adicionado a diretiva ng-controller para indicar que será este o fragmento gerenciado pelo fotos-controller.js-->
    <!-- no valor do repeat se indica onde o angular vai encontrar o valor do primeiro elemento que vai repetir: nomedapropriedade in propriedadedoscope -->
    <!-- O que estiver entre {{}} são lacunas no nosso DOM, chamadas de Angular Expression -->
    <body ng-controller="FotosController">
        <div class="container">

            <div class="jumbotron">
                <h1 class="text-center">Alurapic</h1>
            </div>
            <meu-painel ng-repeat="foto in fotos" titulo="{{foto.titulo}}">
                <img class="img-responsive center-block" src="{{foto.url}}" alt="{{foto.titulo}}">
            </meu-painel>
        </div> <!-- fim container -->        
    </body>
</html>

/*
public/js/main.js

1. Primeiro modulo a ser inicializado quando a view for carregada
2. É responsável pelo carregamento de outros módulos que serão utilizados na aplicação
*/

//Primeiro parâmetro é o nome do módulo
//Segundo parâmetro é um array com outros módulos de que este módulo depende
angular.module('alurapic', ['minhasDiretivas']);

/*
public/js/directives/minhas-diretivas.js

Minhas diretivas é um arquivo que irá conter todas as diretivas criadas por nós
Deve ser declarada no modulo main que é o primeiro modulo a ser carregado
*/

//uma diretiva deve retornar um DDO - directive definition object
    //o nome da diretiva, no Angular, será em CamelCase, porém o uso dela no mundo html será usado hífen "meu-painel"
angular.module('minhasDiretivas')
    .directive('meuPainel', function() {

        var ddo = {}; 

        //primeira coisa que deve ser feita ao criar uma diretiva é definir sua restrição de uso, ou seja, será um atributo? será uma tag? neste caso será uma tag
        ddo.restric = "AE"; //A - atribute; E - expression

        //depois é importante isolar o escopo desta diretiva pra ela não influenciar outros contextos
        ddo.scope = { //é assim que eu passo o dado para o escopo privado da diretiva
            titulo:'@' //@titulo será o atributo da diretiva, por exemplo <meu-painel titulo:"algumacoisa"></meu-painel>
        };

        //transclude true serve para a diretiva entender que não deve excluir os elementos filhos dela no index.html
        ddo.transclude = true;

        //por fim vamos definir o template da diretiva que irá conter o html
        //aqui é adicionada em alguma div a diretiva ng-transclude para o angular entender que é aqui dentro que serão colocados os elementos filhos
        ddo.templateUrl = 'js/directives/meu-painel.html';

        return ddo;
    });