title: Give other controllers access to api call data
body: <p>What I'm trying to do is:</p>
  
  <ol>
  <li>Make an api call as soon as the application runs (using <code>ui-router</code> and idea from <a href="http://www.jvandemo.com/how-to-resolve-angularjs-resources-with-ui-router/" rel="nofollow">http://www.jvandemo.com/how-to-resolve-angularjs-resources-with-ui-router/</a>)</li>
  <li>Store the data 'globally' so that my other controllers can have access to the data</li>
  <li>Once the api call is done and all the controllers have resolved, show the UI (I don't want any flash of loaded content)</li>
  </ol>
  
  <p>I know I could create an angular service to make those api calls within each controller, but if I have 2 controllers on the page, I don't want to make 2 of the same requests.</p>
  
  <p>In the example below, I have a <code>nav.controller.js</code> that needs access to <code>myData</code>. </p>
  
  <p><strong>home.config.js</strong></p>
  
  <pre><code>angular.module('myApp')
    .config(['$stateProvider', '$urlRouterProvider',
      function($stateProvider, $urlRouterProvider) {
  
        $urlRouterProvider.otherwise('/');
  
        $stateProvider
          .state('home', {
            url: '/',
            templateProvider: function($templateCache) {
              return $templateCache.get('home.client.view.html');
            },
            resolve: {
              myService: 'myApiService',
              myData: function(myApiService){
                return myService.get().$promise;
              }
            },
            controller: 'HomeCtrl as home'
          });
      }
    ]);
  </code></pre>
  
  <p><strong>home.controller.js</strong></p>
  
  <pre><code>angular.module('myApp')
    .controller('HomeCtrl', ['myData',
      function(myData){
        var self = this;
  
        // YAY WORKS!
        console.log(myData);
      }
    ]);
  </code></pre>
  
  <p><strong>nav.controller.js</strong></p>
  
  <pre><code>angular.module('myData')
    .controller('NavCtrl', ['$scope', 'myData',
      function($scope, myData) {
        // BOO DOESN'T WORK
        console.log(myData);
      }
    ]);
  </code></pre>
  
  <p><strong>another.controller.js</strong></p>
  
  <pre><code>angular.module('anotherModule')
    .controller('AnotherCtrl', ['$scope', 'myData',
      function($scope, myData) {
        // BOO DOESN'T WORK
        console.log(myData);
      }
    ]);
  </code></pre>