Wait until all the data is loaded . AngularJS
<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>