angular svg foreign object

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<div ng-app="DemoApp">
    <div ng-controller="ExampleController">
        <div class='controls'>
        <div class='control-item'>
            Table Swap
            <button type="button" class="btn btn-primary btn-xs" ng-click="swaptab=!swaptab">{{swaptab}}</button>
        </div>
        <div class='control-item'>
            Width
            <input type='number' ng-model='width'/>
        </div>
        </div>
        <div class="table-container">
            <svg-fo-table class='clearfix' swap='swaptab' data='tabs' meta='metatext' width='width'>
        
        </svg-fo-table>
        </div>
    </div>
</div>

CSS

.controls {
    padding: 10px;
}
.control-item {
    margin-bottom: 10px;
}
.table-container {
    padding: 20px;
}
.table {
    margin: 0;
}
.table td, .table th {
    padding-right: 10px;
    padding-left:10px;
}
.table-meta {
    margin-top: 5px;
    font-size: 11px
}

JavaScript

var demoApp = angular.module('DemoApp', []);

angular.module('DemoApp')
    .directive('svgFoTable', function () {
    return {
        restrict: 'AE',
        scope: {
            swap: '=',
            data: '=',
            meta: '=',
            width: '='
        },
        template: '<svg ng-attr-width="{{width}}" ng-attr-height="{{height}}">' +
        		'<rect x="10" y="10" width"10" height="10" style="fill: yellow"></rect>' +
            '<foreignObject ng-attr-width="{{width}}" ng-attr-height="{{height}}">' +
            '<div id="shell">' +
            '<table class="table table-hover table-bordered" id="mainTable">' +
            '<thead><tr>' +
            '<th ng-repeat="header in liveData[0]">{{header.name}}</th>' +
            '</tr></thead>' +
            '<tbody>' +
            '<tr ng-repeat="row in liveData">' +
            '<td ng-repeat="cell in row">{{cell.value}}</td>' +
            '</tr></tbody>' +
            '</table>' +
            '<p class="table-meta">* {{meta}}</p>' +
            '</div>' +
            '</foreignObject></svg>',
        controller: function($scope,$element,$timeout) {
            $timeout( function() {
                //set height once content is loaded...
                var height = $element.find('#shell')[0].offsetHeight;
                $scope.height = height;
            });
        },
        link: function ($scope,$element) {
            var theTab = angular.element(document.querySelector('#mainTable'));
            $scope.liveData = $scope.data.pop;
            function updateTab(doswap) {
                if (doswap) {
                    $scope.liveData = $scope.data.ind;
                } else {
                    $scope.liveData = $scope.data.pop;
                };
            };
            $scope.$watch('swap', function () {
                updateTab($scope.swap);
            });
            $scope.$watch('width', function () {
                var height = $element.find('#shell')[0].offsetHeight;
   ...