The "ng-attr" directive causes problems in SVG due case-sensitive attributes

Question

I try to create a svg dynamically using angular.

Using "ng-attr" establish the properties of each svg element.

But there is a problem, some properties (like viewBox) are compiled in lowercase. (ng-attr-viewBox becomes viewbox).

"viewbox" does not work as expected.

The problem seems to be that SVG is case sensitive and Angularjs is not.

Any idea how to solve this problem.

SAMPLE

HTML

<div class="container">
  <svg version="1.1" ng-attr-viewBox="{{viewBox}}"
        preserveAspectRatio="xMidYMin">
    <rect x="-10" y="-10" ng-attr-width="{{width}}"
      ng-attr-height="{{height}}"></rect>
  </svg>
</div>

CODE

var mod = angular.module("test1", []);


mod.controller("ctrl", ['$scope', function($scope){
  $scope.title = "demo";

  $scope.width = 100;
  $scope.height = 100;

  var update = function() {
    $scope.viewBox = "-50 -50 " + $scope.width + " " + $scope.height;
  }

  $scope.$watch('width', update);
  $scope.$watch('height', update);


}]);