AngularJS SVG Image ng-style and ng-attr-width Test

http://angularjs.org/

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
<div ng-controller="MainCtrl as mainCtrl">
    Why does only the first bullfinch picture show?
    <div ng-cloak>
        <svg ng-show="mainCtrl.svg.show" xmlns="http://www.w3.org/2000/svg" baseProfile="full" version="1.1" width="200" height="400">
            <!-- https://www.flickr.com/photos/yeliseev/10116904936 -->
            <image xlink:href="https://farm6.staticflickr.com/5535/10116904936_870f94488d_m.jpg"
                    x="20" y="20"
                    width="100" height="100"/>
            <!-- https://www.flickr.com/photos/yeliseev/112992806 -->
            <image xlink:href="https://farm1.staticflickr.com/38/112992806_780ebcd0ce_m.jpg"
                    x="20" y="140"
                    ng-attr-width="{{mainCtrl.svg.style.width}}"
                    ng-attr-height="{{mainCtrl.svg.style.height}}" /> 
            <!-- https://www.flickr.com/photos/yeliseev/4433515854 -->
            <image xlink:href="https://farm5.staticflickr.com/4058/4433515854_41152445a9_m.jpg"
                    x="20" y="260"
                    ng-style="mainCtrl.svg.style" />
        </svg>
    </div>
</div>

CSS

svg {
    background-color: aqua;
}

JavaScript

angular.module('AngularSVGTestApp', [])
.controller('MainCtrl', [function () {
    var self = this;
    self.svg = {
        show: false,
        style: {
            width: 100,
            height: 100
        }
    };
}]);