title: AngularJS : Initialize service with asynchronous data
body: <p>I have an AngularJS service that I want to initialize with some asynchronous data. Something like this:</p>
  
  <pre><code>myModule.service('MyService', function($http) {
      var myData = null;
  
      $http.get('data.json').success(function (data) {
          myData = data;
      });
  
      return {
          setData: function (data) {
              myData = data;
          },
          doStuff: function () {
              return myData.getSomeData();
          }
      };
  });
  </code></pre>
  
  <p>Obviously this won't work because if something tries to call <code>doStuff()</code> before <code>myData</code> gets back I will get a null pointer exception. As far as I can tell from reading some of the other questions asked <a href="https://stackoverflow.com/questions/12657389/angularjs-load-service-then-call-controller-and-render">here</a> and <a href="https://stackoverflow.com/questions/15164013/json-to-initialize-data-in-service">here</a> I have a few options, but none of them seem very clean (perhaps I am missing something):</p>
  
  <p><strong>Setup Service with "run"</strong></p>
  
  <p>When setting up my app do this:</p>
  
  <pre><code>myApp.run(function ($http, MyService) {
      $http.get('data.json').success(function (data) {
          MyService.setData(data);
      });
  });
  </code></pre>
  
  <p>Then my service would look like this:</p>
  
  <pre><code>myModule.service('MyService', function() {
      var myData = null;
      return {
          setData: function (data) {
              myData = data;
          },
          doStuff: function () {
              return myData.getSomeData();
          }
      };
  });
  </code></pre>
  
  <p>This works some of the time but if the asynchronous data happens to take longer than it takes for everything to get initialized I get a null pointer exception when I call <code>doStuff()</code></p>
  
  <p><strong>Use promise objects</strong></p>
  
  <p>This would probably work. The only downside it everywhere I call MyService I will have to know that doStuff() returns a promise and all the code will have to us <code>then</code> to interact with the promise. I would rather just wait until myData is back before loading the my application.</p>
  
  <p><strong>Manual Bootstrap</strong> </p>
  
  <pre><code>angular.element(document).ready(function() {
      $.getJSON("data.json", function (data) {
         // can't initialize the data here because the service doesn't exist yet
         angular.bootstrap(document);
         // too late to initialize here because something may have already
         // tried to call doStuff() and would have got a null pointer exception
      });
  });
  </code></pre>
  
  <p><strong>Global Javascript Var</strong>
  I could send my JSON directly to a global Javascript variable:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;script type="text/javascript" src="data.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>data.js:</p>
  
  <pre><code>var dataForMyService = { 
  // myData here
  };
  </code></pre>
  
  <p>Then it would be available when initializing <code>MyService</code>:</p>
  
  <pre><code>myModule.service('MyService', function() {
      var myData = dataForMyService;
      return {
          doStuff: function () {
              return myData.getSomeData();
          }
      };
  });
  </code></pre>
  
  <p>This would work too, but then I have a global javascript variable which smells bad.</p>
  
  <p>Are these my only options? Are one of these options better than the others? I know this is a pretty long question, but I wanted to show that I have tried to explore all my options. Any guidance would greatly be appreciated. </p>