factory not displaying json data angularjs

Question

I can't seem to display any JSON data from my factory. I'm pretty sure the contractors.json file is loading correctly because the console complained about its syntax a few times. My grunt watch isn't giving me any errors, nor is the console. I'm new to angular and I'm not sure what is wrong.

  'use strict';

angular.module('angularPlainApp', [ 'ngCookies', 'ngResource', 'ngSanitize', 'ngRoute' ])

  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  })

  .controller('MainCtrl', function ($scope, dataList) {
    $scope.contractors = dataList.getList();

    $scope.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];
  })

  .factory('dataList', function($http, $q) {
    return {
      getList: function() {
        var deferred = $q.defer();
        $http.get('scripts/contractors.json').success(function(data){
          deferred.resolve(data);
        }).error(function(){
          return deferred.promise;
        });
      },
    };
  });

I put my app.js in all different types setups and never displayed any of the data, same with the html snippet.

<aside class= "contractors">
    <ul class= "contractors-list" ng-controller="MainCtrl" >
    <li ng-repeat = "contractor in contractors">
            <div class="headshot-wrapper">
                <img src='path/to/img.img'>
            </div>
            <div class="contractor-summary-info">
            <h3>{{ contractors.name }}</h3>
            <h4 class="summary-subhead">{{ contractors.position }}</h4>
                <p>{{ contractors.number }}</p>
                <p>{{ contractors.jobFunction }}</p>
            </div>
        </li>
    </ul><!--.contractor-summary-->
    </aside><!--contractor-list-->

No information from my external contractors.json file is showing up.

I'm using bower, yeoman and gruntjs. Any tips, tricks or general input is greatly appreciated. Thanks in advace!

Answer 1

you did not return the promise:

var deferred = $q.defer();
    $http.get('scripts/contractors.json').success(function(data){
      deferred.resolve(data);
    }).error(function(){
      //
      // !!!! here is your mistake! 
      // You only return the promis if an error occured.
      // 
      return deferred.promise;
    });

try it this way:

var deferred = $q.defer();
$http.get('scripts/contractors.json').success(function(data){
    deferred.resolve(data);
}).error(function(){
   deferred.reject();
});
return deferred.promise;