AngularJS trouble with $resource call

Question

I'm new to front end development, apologies if this is not the most sophisticated question. I want to do something fairly simple: display a list of items from the JSON returned by an http call to a REST api. I can't seem to make sense of why my PoC isn't returning anything from the server, not even logging to the console in the callback function in the controller. I based this PoC on the angular-seed project: https://github.com/angular/angular-seed

A sample server response would be a simple array of strings:

["bacon","lettuce","tomato"]

The different bits I setup to get this running are:

ingredient-list.html

<div ng-app="myApp" ng-controller="IngredientListController">
    <input type="text" ng-model="$scope.query">
</div>

<ul>
    <li ng-repeat="ingredient in $scope.ingredients | filter:$scope.query">
        <p>{{ingredient}}</p>
    </li>
</ul>

ingredient-list.js

'use strict';

angular.module('myApp.ingredientList', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/ingredientList', {
    templateUrl: 'ingredient-list/ingredient-list.html',
    controller: 'IngredientListController'
  });
}])

.controller('IngredientListController', function($resource) {
  var Ing = $resource('http://mumbo.com/rest/getIngredients');
  var ingredients = Ing.get();
  ingredients.$promise.then(function(){
    $scope.ingredients = ingredients;
    console.log(ingredients);
  });

});

Debugging has also been a challenge, if you have some suggestions for a rookie please send them over too!

Thanks in advance :)