Angular $http not resolving in $routeProvider

Question

I am trying to display data from a JSON file onto the webpage. My Code

angular.module('bioA.configs',['ngRoute'])
//Config routes
.config(['$routeProvider',function($routeProvider){
    $routeProvider.when('/',
    {
        templateUrl: 'list.tpl.html',
        controller: 'BioACtrl',
        resolve: {
            bioAList: ['$http',function($http){
                return $http.get('bioa.json');
            }]
        }
    });
}]);
//Controller to Manage the data
angular.module('bioA.controllers',['bioA.configs'])
.controller('BioACtrl',['bioAList','$scope',function($scope,bioAList){
    console.log(bioAList);
    $scope.samples = bioAList.data.samples;
}]);
angular.module('bioA',['ngRoute','bioA.controllers','bioA.configs','ui.bootstrap']);

The $http doesnt seem to resolve. here is the console output: I am AngularJS noob any help is appreciated :) I am stuck. Why is the resolved object a ChildScope rather than being a promise ?

Answer 1

first of all, your includes are reversed here

controller('BioACtrl',['bioAList','$scope',function($scope,bioAList){

Should be

controller('BioACtrl',['$scope', 'bioAList',function($scope,bioAList){

Second, you are trying to access data in your bioAList service before you even fetch it. The correct way to do this is with angular promises. I modified the plnkr to acheive this access paradigm:

bioAList.getSamples().then(function(data) {
    $scope.samples = data.samples;
})

EDIT: add the thing that @OdeToCode points out.

Good point! you can just return the $http promise as the service.

return $http.get('bioa.json').success(function(data,status){
    return data;
})

And access it like you originally had.

Hope this helps!