Customize Username Display

I’d like to customize the username displaying in the top right corner. The current HTML snippet is as below:

<div class="btn-group" ng-show="loggedInUser.username">
                        <button type="button" class="btn btn-warning">
                            {{ loggedInUser.username }}
                            @{{ loggedInUser.realm }}
                            ({{ loggedInUser.role }})

I’d like to change it to display givenname surname like below, but that doesn’t seem to work. Is this possible or am I just referencing these attributes incorrectly?

<div class="btn-group" ng-show="loggedInUser.username">
                        <button type="button" class="btn btn-warning">
                            {{ loggedInUser.givenname }}
                            \ {{ loggedInUser.surname }}
                            ({{ loggedInUser.role }})

The loggedInUser is an AuthFactory object that does not have this information.
See https://github.com/privacyidea/privacyidea/blob/a2c710323526c4625adcb3498fd30d8d7d3ff1b3/privacyidea/static/components/login/factories/auth.js#L32

Is there any other way without extensive re-coding to accomplish what I am wanting to do?

No, not to my knowledge.