Error: $injector:unpr Unknown Provider - angularjs

Question

I have app.js code like this
var MYApp = angular.module('myApp', ['ngRoute', 'myAppServices', 'ngSanitize'])
.config(myRouter);
angular.module('myAppServices', ['ngResource'])
.factory('GridsAPI', function($resource) {
return {
Users: $resource('/MY/system/users/grid'),
Groups: $resource('/MY/system/groups/grid'),
GroupList: $resource('/MY/system/getGroupList')
};
});
MYApp.controller('CreateUserController', ['$scope', 'groupList', function($scope, groupList) {
$scope.test = 'Hello';
$scope.groups = groupList;
debugger; //here I am getting correct values of test and groups
}]);
function myRouter($routeProvider) {
$routeProvider
.when('/users/create', {
templateUrl: '/MY/system/users/create',
controller: 'CreateUserController',
resolve: {
groupList: function(GridsAPI) {
return GridsAPI.GroupList.get().$promise;
}
}
});
}
here is my html
<div class="white-box" ng-controller="CreateUserController">
<h1>{{test}}</h1>
<pre>{{ groups | json }}
</div>
and in browser I am getting this, no binding at all, what I am missing??
{{test}}
{{ groups | json }}
at debugger I am getting object correctly... see the screenshot

Answer 1

Your resolve returns a promise. This promise will contain your groups as soon as they arrive.
MYApp.controller('CreateUserController', ['$scope', 'groupListPromise', function($scope, groupList) {
$scope.test = 'Hello';
$scope.groups = [];
groupListPromise.then(function(groupList){
$scope.groups = groupList;
});
debugger; //here I am getting correct values of test and groups
}]);
function myRouter($routeProvider) {
$routeProvider
.when('/users/create', {
templateUrl: '/MY/system/users/create',
controller: 'CreateUserController',
resolve: {
groupListPromise: function(GridsAPI) {
return GridsAPI.GroupList.get().$promise;
}
}
});
}