title: How do I use AngularJS with Google API JavaScript Client?
body: <p>I am wondering how I would convert this <a href="https://code.google.com/p/google-api-javascript-client/wiki/Samples" rel="nofollow">Google API JavaScript Sample code</a> into an AngularJS app. I thought it would be really neat.</p>
  
  <p>And as a follow-up how would it work with Oauth 2.0?</p>
  
  <p>Thanks.</p>
  
  <p>I tried using the angularjs seed app and modified it like this -</p>
  
  <pre><code>// controller.js
  
  function SampleListCtrl ( $scope, $http ){
    $http.
    jsonp( 'https://apis.google.com/js/client.js?onload=JSON_CALLBACK' ).
    success( function () {
      alert( 'go go GO' );
      function makeRequest () {
      var request = gapi.client.urlshortener.url.get({
        'shortUrl': 'http://goo.gl/fbsS'
      });
  
     request.execute( function(response) {
         $scope.longUrl = response.longUrl;
       });
     }
  
      gapi.client.setApiKey( 'XXXX' );
      gapi.client.load( 'urlshortener', 'v1', makeRequest );
  
      $scope.samples = data.feed.entry;
    });
  };
  </code></pre>
  
  <p>And in index.html</p>
  
  <pre><code>&lt;div ng-controller="SampleListCtrl"&gt;
      &lt;h4&gt;{{ longUrl }}&lt;/h4&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>RE: Roy Truelove's tip I have tried adding an error callback which is firing</p>
  
  <pre><code>error( function () {
    console.log( JSON.stringify( arguments ) );
  });
  </code></pre>
  
  <p>I wasn't sure what would come back so I inspected the arguments object and so the output in the console is -</p>
  
  <pre><code>{"1":0,"3":{"method":"JSONP","url":"https://apis.google.com/js/client.js?onload=JSON_CALLBACK"}}
  </code></pre>
  
  <p>The alert does not fire meaning that the callback didn't work. How do I get that to work? Is there a better approach?</p>