Angularjs: angular-ui tabs, and diagram not centered on initial render

While implementing the basic AngularJS demo from the GoJS samples inside of angular-ui tabs, I am running into an issue where the diagram gets rendered, but it is stuck in the top right corner of the canvas, instead of being centered as per initialContentAlignment: go.Spot.Center. I don’t know why the alignment does not center.

When logging out the diagram.contentAlignment inside the scope.$watch("model", function(newmodel) {, the x and the y coordinates come out as NaN.

To fix - and this seems like an utter hack - adding this check inside the watch seems to help.

if (isNaN(diagram.contentAlignment.x)) {
    diagram.contentAlignment = go.Spot.Center;
}

Check on how big the HTML DIV element actually is. If the HTML elements have resized or changed visibility or been added to the DOM, you might need to tell the Diagram that the DIV has changed size, by calling Diagram.requestUpdate.
https://gojs.net/latest/intro/resizing.html