Boot AngularJS + Cloud Endpoints <p>Is there a way to initialize angular and endpoints without manual boot of angular?</p> <p>I thought I'd found an elegant solution <a href="https://cloud.google.com/resources/articles/angularjs-cloud-endpoints-recipe-for-building-modern-web-applications" rel="nofollow">here</a>.</p> <p>Unfortunately for me window.init isn't always declared before it's called by the callback despite the sequence order of scripts. It works fine on refresh but not always on first page load. The console outputs "Uncaught TypeError: Object [object global] has no method 'init' ".</p> <p>Finally I've tried to manually bootstrap angular from the endpoints callback (eg <a href="http://stackoverflow.com/questions/15905755/angularjs-and-google-cloud-endpoint-walk-through-needed">here</a>, but on trying this it caused lag where angular should replace the handlebar placeholders, so the html was full of handlebars for a few seconds. I appreciate this may be the only way to do this however the first link above from google suggests otherwise.</p> <p><strong>UPDATE:</strong></p> <pre><code>function customerInit(){ angular.element(document).ready(function() { window.init(); }); } </code></pre> <p>This seems to solve my problem, it enforces that angular controller is initialized before endpoints. This isn't mentioned on googles page here, but it seems necessary to enforce the order of initialization.</p> <p>hmtl:</p> <pre><code>&lt;html ng-app lang="en"&gt; &lt;head&gt; &lt;link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css"&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"&gt;&lt;/script&gt; &lt;script src="js/customer.js"&gt;&lt;/script&gt; &lt;script src="https://apis.google.com/js/client.js?onload=customerInit"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="container" ng-controller="customerCtrl"&gt; &lt;div class="page-header"&gt; &lt;h1&gt;Customers&lt;/h1&gt; &lt;/div&gt; &lt;div class="row"&gt; &lt;div class="col-lg-10"&gt; &lt;table id="customerTable" class="table table-striped table-bordered table-hover"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;First Name&lt;/th&gt; &lt;th&gt;Surname&lt;/th&gt; &lt;th&gt;Email Address&lt;/th&gt; &lt;th&gt;Home Phone&lt;/th&gt; &lt;th&gt;Mobile Phone&lt;/th&gt; &lt;th&gt;Work Phone&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr ng-repeat="customer in allCustomers"&gt; &lt;td&gt;{{customer.firstName}}&lt;/td&gt; &lt;td&gt;{{customer.surName}}&lt;/td&gt; &lt;td&gt;{{customer.emailAddress}}&lt;/td&gt; &lt;td&gt;{{customer.homePhone}}&lt;/td&gt; &lt;td&gt;{{customer.mobilePhone}}&lt;/td&gt; &lt;td&gt;{{customer.workPhone}}&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>customer.js:</p> <pre><code>function customerInit(){ window.init(); } function customerCtrl ($scope) { window.init= function() { $scope.$apply($scope.load_customer_lib); }; $scope.is_backend_ready = false; $scope.allCustomers = []; $scope.load_customer_lib = function() { gapi.client.load('customer', 'v1', function() { $scope.is_backend_ready = true; $scope.getAllCustomers(); }, '/_ah/api'); }; $scope.getAllCustomers = function(){ gapi.client.customer.customer.getCentreCustomers() .execute(function(resp) { $scope.$apply(function () { $scope.allCustomers = resp.items; }); }); }; }; </code></pre>