diff --git a/controllers.js b/controllers.js
index ee6a84e..534ff78 100644
--- a/controllers.js
+++ b/controllers.js
@@ -7,6 +7,24 @@ angular.module('demo', ["googleApi"])
     })
     .controller('DemoCtrl', ['$scope', 'googleLogin', 'googleCalendar', 'googlePlus', function ($scope, googleLogin, googleCalendar, googlePlus) {
 
+        $scope.authenticated = false;
+
+        $scope.$on("google:authenticated", function(){
+            $scope.authenticated = true;
+            $scope.$on('googleCalendar:loaded', function(){
+                $scope.calendars = googleCalendar.listCalendars();
+                $scope.$apply();
+            });
+        });
+
+        function checkAuth() {
+            setTimeout(function(){
+                gapi.auth === undefined ? checkAuth() : googleLogin.checkAuth();
+            }, 20);
+        }
+        checkAuth();
+
+
         $scope.login = function () {
             googleLogin.login();
         };
diff --git a/example.html b/example.html
index af7f5a1..23efdf1 100644
--- a/example.html
+++ b/example.html
@@ -8,16 +8,16 @@
 
 <div>
   <div>
-    <button ng-click="login()">Login</button>
-    <select name="calendar" ng-model="selectedCalendar" ng-options="cal.summary for cal in calendars"></select>
-    <button ng-click="loadCalendars()">Get Calendars</button>
-    <button ng-click="loadEvents()">Get Calendar Entries</button>
+    <button ng-hide="authenticated" ng-click="login()">Login</button>
+    <select ng-show="authenticated" name="calendar" ng-model="selectedCalendar" ng-options="cal.summary for cal in calendars"></select>
+    <button ng-show="authenticated" ng-click="loadCalendars()">Get Calendars</button>
+    <button ng-show="authenticated" ng-click="loadEvents()">Get Calendar Entries</button>
   </div>
 
   <ul>
     <li ng-repeat="item in calendarItems">{{item.summary}}</li>
   </ul>
-  <div ng-show="currentUser">
+  <div ng-cloak ng-show="currentUser" >
     <h1>You're authenticated!</h1>
 
     Logged in as {{currentUser.displayName}}