How to size an SVG viewBox with AngularJs?

Solutions to similar questions involve CSS and the img tag.

However, I cannot use the <img src="myFile.svg"> because the SVG contains Angular directives, such as

  <path id="Top row 1" ng-click='RoomClicked($event, "A-1")'
        fill={{GetFillColour('A-1')}} stroke="black" stroke-width="1"
        d="M 226.00,69.00
           C 226.00,69.00 226.00,136.00 226.00,136.00  ...

So, I thought to have the SVG inline, in a view, and to size the SVG viewBox according to its its container, because (important) the whole idea is that I want to be able to display the web page at any resolution and have the SVG scale to fit it's parent DIV.

So, I tried

<div>
    <svg xmlns="http://www.w3.org/2000/svg"         
         viewBox="0 0 {{GetSvgDivHeight()}} {{GetSvgDivWidth()}}">

in my view, and

$scope.GetSvgDivHeight = function() 
{
   height = Math.round(screen.height * 0.8);

   return height;
}

$scope.GetSvgDivWidth = function() 
{
   width = document.getElementById('SVG_goes_here').offsetWidth;

   return width;
}

in my controller.

But, the SVG does not show, and the developer console shows

jquery-3.1.1.min.js:3 Error: <svg> attribute viewBox: Expected number, "0 0 {{GetSvgDivHeigh…".

So, 1) can I set the size of my in line SVG's viewBox programactically, from $scope? 2) if not, how can I make the inline SVG, containing Angular directives, fill its parent DIV, and resize if that DIV is resized?

[Update] InkScape generated

<svg xmlns="http://www.w3.org/2000/svg"
     width="7.22222in" height="10.0444in"
     viewBox="0 0 650 904">

when I change that to

<svg xmlns="http://www.w3.org/2000/svg"
     height="100%"
     viewBox="0 0 650 904">

The image fills the width of the containing DIV, but only the top half shows and the browser tab grows a vertical scroll bar.