Get resolve variable and pass to controller - angularjs

Question

Hi I created a model named billerModel and a route that has a resolve with a variable of billers. Now I want to retrieve and assign this variable inside my controller but I get this billerData unknown provider error. Below are my code for the route:
app.config(["$routeProvider", "$httpProvider",'$locationProvider',function($routeProvider, $httpProvider, $locationProvider) {
$routeProvider
.when("/billers", {
templateUrl: 'admin/billers/index.html',
controller: 'billerController',
resolve: {
billerData: function(billerModel) {
return billerModel.getData();
}
}
});
Below is my code for the model
app.factory('billerModel', ['$http', '$cookies', function($http, $cookies) {
return {
getData: function() {
return $http({
method: 'GET',
url: 'billers'
});
}
}
}]);
Below is my controller code that gives me the error
app.controller('billerController', ['$scope', 'billerData',
function($scope, billerData){
$scope.billers = billerData;
}]);
I also tried to remove the ng-controller from my view but if I do this then I get an error of unknown variable
<div style="text-align: left;" ng-controller="billerController">
{{ billers }}
</div>
Below is a jsfiddle but I'm not familiar on how to use it but the basic structure is included here
https://jsfiddle.net/bd06cctd/1/

Answer 1

Resolve data in .when blocks is only injectable into controllers defined by the .when block. Child controllers injected by the ng-controller directive can not inject resolve data.
Also if you inject billerController in the .when block and with the ng-controller directive in the .when block template, then the controller will be instantiated twice.
The $routeProvider also makes resolve data available on the view scope on the $resolve property. Child controllers instantiated by the ng-controller directive can use that.
app.controller('childController', ['$scope',
function($scope){
$scope.billers = $scope.$resolve.billerData;
}]);
Controllers instantiated by the ng-controller directive will find the $resolve property by prototypical inheritance from the view scope.
From the Docs:
resolve - {Object.<string, Function>=} - An optional map of dependencies which should be injected into the controller. If any of these dependencies are promises, the router will wait for them all to be resolved or one to be rejected before the controller is instantiated. If all the promises are resolved successfully, the values of the resolved promises are injected and $routeChangeSuccess event is fired. If any of the promises are rejected the $routeChangeError event is fired. For easier access to the resolved dependencies from the template, the resolve map will be available on the scope of the route, under $resolve (by default) or a custom name specified by the resolveAs property.
-- AngularJS $routeProvider API Reference

Answer 2

Could you try changing:
app.factory('billerModel', ['$http', '$cookies', function($http, $cookies) {
return {
getData: function() {
return $http({
method: 'GET',
url: 'billers'
});
}
}
}]);
to
app.factory('billerModel', ['$http', '$cookies', function($http, $cookies) {
return {
getData: $http({
method: 'GET',
url: 'billers'
});
}
}]);
You're returning an anonymous function, not a Promise