Imagem não aparece quando inserido a url | AngularJS: crie webapps poderosas

Boa noite, Flávio! Tudo bem? Se lembra de mim, estudei com você na Estácio. Vamos lá, quanto à dúvida:

Quando insiro a url da foto, ela não está sendo carregada na tela. No console do browser não aparece erro nenhum, não consigo ver o que está acontecendo.

A url que estou passando é essa: http://www.fundosanimais.com/imagens-fundos-rei-selva-jpg

Segue abaixo o meu código:

index.html

<!DOCTYPE html>
<!-- o module alurapic deve ser registrado dentro do angular
     no carregameneto da página por isso usa o ng-app="alurapic".
     Ele é o module principal, quando
     o browser é carregado, carrega ele também.
-->
<html lang="pt-br" ng-app="alurapic">
    <head>
        <meta charset="UTF-8">

        <!-- além de habilitar habilitando <base href="/"> na view principal
             é necessário  habilitar também no module principal
             $locationProvider.html5Mode(true);
        -->
        <base href="/">

        <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">
            <link rel="stylesheet" href="css/efeitos.css">
            <script src="js/lib/angular.min.js"></script>
        <script src="js/lib/angular-animate.min.js"></script>
        <script src="js/lib/angular-route.min.js"></script>
            <script src="js/main.js"></script>
            <script src="js/controllers/fotos-controller.js"></script>
        <script src="js/controllers/foto-controller.js"></script>
            <script src="js/directives/minhas-diretivas.js"></script>

    </head>

    <body>
        <div class="container">
            <ng-view></ng-view>
        </div>
    </body>
</html>

main.js

angular.module('alurapic', ['minhasDiretivas', 'ngAnimate', 'ngRoute'])
.config(function($routeProvider, $locationProvider){


    $locationProvider.html5Mode(true);
    $routeProvider.when('/fotos', {
      templateUrl: 'partials/principal.html',
      controller: 'FotosController'
    });

    $routeProvider.when('/fotos/new', {
      templateUrl: 'partials/foto.html',
      controller: 'FotoController'
    });

    $routeProvider.otherwise({redirectTo: '/fotos'});
});

minhas-diretivas.js

  //Atenção! camelCase no Angular ex: meuPainel
//e na tag é modificado por hífen. ex: <meu-painel>

angular.module('minhasDiretivas', [])

.directive('meuPainel', function(){

  var ddo = {};

  //pode ser usado como Atributo ou Elemento
  ddo.restrict = "AE";

  //esse scope é só da diretiva, é um scope isolado
  //@titulo -> eu preciso passar informarção do mundo externo para ela
  //o Atributo titulo é a minha interface de comunicação com a diretiva
  //é como eu passo dado para dentro do scope da direvita
  //@titulo -> é onde eu capituro o valor passado para o atributo, ou elemento
  //Atenção! no lugar de @titulo, eu posso usar somente '@' para capturar
  // o valor, esse valor é passado como string
  ddo.scope = {
    //titulo:  '@titulo'
    titulo: '@'
  };

  //quero que minha diretiva mantém os filhos dela quando o angular for
  //processar no html
  ddo.transclude = true;

  ddo.templateUrl = 'js/directives/meu-painel.html'

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

        var ddo = {};

        ddo.restrict = "AE";

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

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

        return ddo;
    });

foto.html

<!-- public/partials/foto.html -->

<div class="page-header text-center">
    <!-- quando eu só quero exiber, uso Angular Expression AE {{}} -->
    <h1>{{foto.titulo}}</h1>
</div>

<form name="formulario" class="row" ng-submit="submeter()">
    <div class="col-md-6">
        <div class="form-group">
            <label>Título</label>

            <!-- o que digitar no input tem que aparecer no título
                 <h1>{{foto.titulo}}</h1> -->
            <input name="titulo" class="form-control" ng-model="foto.titulo">
        </div>
        <div class="form-group">
            <label>URL</label>
            <input name="url" class="form-control" ng-model="foto.url">
        </div>
        <div class="form-group">
            <label>Descrição</label>
            <textarea name="descricao" class="form-control"
                      ng-model="foto.descricao">
            </textarea>
        </div>

        <button type="submit" class="btn btn-primary">
            Salvar
        </button>
         <a href="/" class="btn btn-primary">Voltar</a>
        <hr>
    </div>
    <div class="col-md-6">
        <!-- quando eu só quero exiber, uso Angular Expression AE {{}} -->
        <minha-foto url="{{foto.url}}" titulo="{{foto.titulo}}"></minha-foto>
    </div>
</form>

foto-controller.js

angular.module('alurapic').controller('FotoController', function($scope){

  //disponibilizo um objeto vazio
  $scope.foto = {};

  $scope.submeter = function(){

    console.log($scope.foto);
  }
});