AngularJS SVG + Animation

HTML

<div ng-app="">
    <div ng-controller="Ctrl">
        Animation: <input type="checkbox" ng-model="isAnimation"/>
        <button ng-click="add()">Add</button>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" >
                <g ng-repeat="rect in rects" transform="translate({{rect.x}}, {{rect.y}})">
                    <rect width="{{rect.width}}" height="{{rect.height}}" ng-switch on="isAnimation">                 
                        <animateTransform attributeName="transform" attributeType="XML" type="scale" dur="3s" repeatCount="indefinite" values="1 1.2; 1.2 1; 1 1.2" ng-switch-when="true"/>
                    </rect>
            </g>
            <rect x="10" y="100" width="100px" height="50px"></rect>
        </svg>
    </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script> <style> rect {
    fill: blue;
}

JavaScript

function Ctrl($scope) {
    $scope.isAnimation = true;
    $scope.rects = [];
    var w = 50;
    var h = 50;
    var margin = 10;

    $scope.add = function () {
        var i = $scope.rects.length;
        var r = {
            width: w,
            height: h,
            x: i * (w + margin),
            y: 0,
            isAnimation: $scope.isAnimation
        };
        $scope.rects.push(r);
    }
}