AngularJS Isolated Scope photo

This is a fiddle designed to illustrate isolated scope using the updated and simpler syntax. This is a take on John Lindquist's fiddle which looked like this: http://jsfiddle.net/simpulton/RUbSv/

HTML

<div ng-app="myApp">
    <div ng-init="photo.url = 'http://www.w3schools.com/js/pic_bulboff.gif'"></div>output:{{photo.url}}
    <img ng-src='http://www.w3schools.com/js/pic_bulboff.gif' />
    <my-d photo-src={{photo.url}} />
    <my-d1></my-d1>
</div>

JavaScript

// My Main Application File
    angular.module('myApp', ['myDirectives']);

    // My Directives File
    angular.module('myDirectives', []);

    // Controller One File
    angular.module('myDirectives', []).directive('myD', function () {
        return {
            restrict: 'E',
            template: '<figure> <img ng-src="{{photoSrc}}"/> </figure>',
            replace: true,
            // pass these two names from attrs into the template scope
            scope: {
                photoSrc: '@'
            }
        }
    })
    angular.module('myDirectives', []).directive('myD1', function () {
        return {
            restrict: 'E',
            template: '<p>Text</p>'
        }
    })