title: The correct order to load Google Client api gapi and angular js
body: <p>It's kind of tricky how to load js files in an Angular project together with Google Client js api.</p>
  
  <p>This question is talking about the correct order of doing this.
  <a href="https://stackoverflow.com/questions/19399419/angular-js-and-google-api-client-js-gapi">Angular Js and google api client.js (gapi)</a></p>
  
  <p>And there is an Official Doc talking about this, 
  <a href="https://cloud.google.com/developers/articles/angularjs-cloud-endpoints-recipe-for-building-modern-web-applications/" rel="nofollow noreferrer">https://cloud.google.com/developers/articles/angularjs-cloud-endpoints-recipe-for-building-modern-web-applications/</a>.</p>
  
  <p>One thing in the doc is that it uses window.init() inside of init which will be causing an infinite loop.</p>
  
  <p>As willlma pointed out, we should use a different name for the function.</p>
  
  <p>But I have met an error of 
  Uncaught TypeError: window.initGAPI is not a function</p>
  
  <p>The project is created by using yeoman generator for angular. </p>
  
  <p>The order of loading js in index.html</p>
  
  <pre><code>&lt;script src="scripts/app.js"&gt;&lt;/script&gt;
  &lt;script src="scripts/controllers/main.js"&gt;&lt;/script&gt;
  &lt;script src="scripts/controllers/about.js"&gt;&lt;/script&gt;
  &lt;script src="https://apis.google.com/js/client.js?onload=init"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>app.js(only the latter part of this file):</p>
  
  <pre><code>var init = function(){
      console.log("gapi init");
      window.initGAPI();
  }
  </code></pre>
  
  <p>main.js:</p>
  
  <pre><code>angular.module('testApp')
    .controller('MainCtrl', function ($scope, $window) {
      $window.initGAPI = function(){
          console.log("controller inti");
      }
      $scope.awesomeThings = [
        'HTML5 Boilerplate',
        'AngularJS',
        'Karma'
      ];
    });
  </code></pre>
  
  <p>I have put some logs to test and found that the definition for $window.initGAPI is executed before loading the cliet.js which calls window.init, but inside of window.init, window.initGAPI is not defined. It seems in the main controller, defining a function called initGAPI to object window failed. </p>