$http and $stateParams in resolve of $stateProvider, Unknown provider error
<p>The goal here is to send an http request with the same parameter of the state parameter. This will then display the food types associated with the cuisine type that has been clicked. Is this even theoretically possible? </p>

<pre><code>"Error: [$injector:unpr] Unknown provider: getFoodsProvider &lt;- getFoods &lt;- AppCtrl"
</code></pre>

<p><strong>js</strong></p>

<pre><code>var myApp = angular.module('myApp', ['ui.router']);

myApp.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('home', {
            url:'/',
            templateUrl: 'partials/home.html',
            controller: 'AppCtrl'
        })
        .state('food', {
            url: '/food/:cuisine',
            templateUrl: 'partials/food.html',
            controller: 'AppCtrl',
            resolve: {
                getFoods: ['$http', '$stateParams', function($http, $stateParams) {
                    var url = '/getfoods/' + $stateParams.cuisine;
                    return $http.get(url).success(function(response) {
                        return response.data;
                    })
                }]
            }
        });
    $urlRouterProvider.otherwise('/');
});

myApp.controller('AppCtrl', ['$scope', 'getFoods', function ($scope, getFoods) {
    $scope.foods= getFoods;
}]);
</code></pre>

<p><strong>home</strong></p>

<pre><code>&lt;md-list&gt;
    &lt;md-list-item ng-repeat="cuisine in cuisines"&gt;
        &lt;a ui-sref="food({cuisine:cuisine})"&gt;{{cuisine}}&lt;/a&gt;
    &lt;/md-list-item&gt;
&lt;/md-list&gt;
</code></pre>

<p><strong>food</strong></p>

<pre><code>&lt;md-list&gt;
    &lt;md-list-item ng-repeat="food in foods"&gt;
        &lt;div&gt;{{food}}&lt;/div&gt;
    &lt;/md-list-item&gt;
&lt;/md-list&gt;
</code></pre>