title: Wait until all the data is loaded . AngularJS
body: <p>I am writing a code that would call DATA from JASON file. 
  I had an asynchronous problem and saw many posts about same issue. </p>
  
  <p>I wrote some code that I guess it would fix my problem.
  It, however, seems like the data is still not loaded. </p>
  
  <p>I will be more specific with my question. I used promise method below. I thought 'questions' should not be returned before all the data is fully loaded. Apparently, 'questions', having nothing inside, is returned to my page. </p>
  
  <p>Is my promise method correct? if not how can I fix this problem.
  Can someone please help me? </p>
  
  <pre><code>(function(){
  
  angular
      .module("GrammarQuiz")
      .factory("DataService", DataFactory);
      function DataFactory($log, $q, $http, $timeout){
          var vm = this
          var questions = getData() ;
          vm.getData = getData;
  
          function getData(){
              var defer = $q.defer()
              $http.get('api/data1.json')
              .success(function(res){
                  questions = res;
                  $log.log('success');
                  defer.resolve(res);
              })
              .error(function(err, status){
                  $log.log('fail');
                  defer.reject(err);
              })
              return defer.promise;
          }
  
  
          $log.log('check');
          $log.log(questions[0]);
  
          return questions;
      }  
  
  
  })();
  </code></pre>