$ http request возвращает данные только в том случае, если я обертываю внутри $ timeout

Question

У меня есть проблема здесь, когда я нажимаю кнопку, которая находится внутри компонента, я вижу, что я делаю вызов $ http, и я не получаю ответ в консоли, но в браузере я вижу, что вызов сделан.

Он удаляет данные только тогда, когда я раскомментирую функцию $ timeout.

JS

var app = angular.module('myApp', []); 
app.controller('mainCtrl', [$scope, $http, $timeout, function($scope, $http, $timeout) { 

    $scope.navigate = function() { 
     $scope.getStats(); 
    } 

    $scope.getStats = function() { 
     //$timeout(function() { 
      $http 
       .get('/scripts/controllers/fda/appSvc.json') 
       .then(function (response) { 
        console.log(response.data); 
       }, function (error) { 
        console.log(error); 
       }) 
    //}, 0) 
    }; 

    $scope.detailedTableCtrl = { 
     navigate: $scope.navigate 
    } 

}]); 

app.component("myBox", { 
     bindings: { 
      'detailedTableCtrl': '=' 
     }, 
     controller: function($element) { 

     }, 
     controllerAs: 'myBox', 
     templateUrl: "/template", 
     transclude: true 
}) 

HTML

<div ng-app="myApp" ng-controller="mainCtrl"> 
     <my-box detailed-table-ctrl="detailedTableCtrl"></my-box> 
    </div><!--end app--> 

<!--mybox component--> 
    <button class="btn btn-default btn-sm" ng-click="myBox.detailedTableCtrl.navigate()"> 
       <span class="glyphicon glyphicon-chevron-left"></span> 
       <span>Back</span> 
      </button> 

Answer 1

Как @Amy отметил, я не вижу $ службы HTTP впрыскивается. Также, пожалуйста, используйте сервис, чтобы потреблять данные и вводить службу в контроллер. Ваш контроллер не должен беспокоиться о вызове/потреблении данных.

<!-- Controller to get data from the Service or Factory (pay attention to service injection here) --> 
app.controller('mainCtrl', ['$scope', 'dataService', function($scope,dataService) { 

    dataService.getData().then(function(response) { 
      $scope.response = response.data; 
     }, function(error) { 
      $scope.error = error; 
      $scope.response = []; 
     }); 
}); 

<!-- Factory to handle your data from REST or JSON --> 
(function() { 
    "use strict"; 
    app.factory("dataService",['$http', function($http){ 

    function getData(){ 
     return $http.get('/scripts/controllers/fda/appSvc.json'); 
    } 
    return { 
     getData : getData 
    }; 
}]); 
})();