I've been searching for a solution to my issue without much success, even though it seems like it should be an easy fix.
Currently, I am using AngularJS and Google auth2 for authentication to fetch the logged in user's information. My goal is to store the user's name in an AngularJS variable so that I can display it on the page temporarily.
Below is the relevant HTML code:
<meta name="google-signin-client_id" content="(client id here)">
<script src="bower_components/angular/angular.js"></script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<body ng-app="CalendarApp" >
<div class="container" ng-controller="CalendarCtrl">
<div class="header well" >
<h1> Some heading </h1>
<p id="welcometext"> Welcome, {{userName}} </p>
</div>
</div>
</body>
And here is the corresponding JavaScript:
var myApp = angular.module('CalendarApp', []);
myApp.controller('CalendarCtrl', ['$scope', function($scope) {
$scope.userName = "tst";
gapi.load('auth2', function() {
auth2 = gapi.auth2.init({
fetch_basic_profile: true,
scope: 'profile'
});
// Sign the user in, and then retrieve their ID.
auth2.signIn().then(function() {
var profile = auth2.currentUser.get().getBasicProfile();
$("#welcometext").text("Welcome, " + profile.getName());
$scope.userName = profile.getName();
console.log($scope.userName);
});
}); // gapi.load
Despite successfully fetching the user data, I'm encountering an issue where only "tst" is displayed instead of the actual name in
$scope.userName = profile.getName();