Getting Unknown provider error for resolved value

Question

I have this simple Router:

    .when('/login/:uuid', {
            templateUrl: 'views/login.html',
            controller: 'RoomLoginCtrl',
            resolve: {
              roomName: function($route, ServerService) {
                var uuid = $route.current.params.uuid;
                return ServerService.getRoomName(uuid); //returns promise
              }
            }
          })
....

And here is the controller:

(function(angular) {
  angular.module('app')
    .controller('RoomLoginCtrl', RoomLoginCtrl);

  function RoomLoginCtrl($location, TransferService, roomName) {
    var vm  = this;
    vm.$location = $location;
    vm.TransferService = TransferService;
    vm.roomName = roomName;
    vm.userName = "";
  }
})(angular);

My problem is that I am getting the following error:

Error: [$injector:unpr] Unknown provider: roomNameProvider <- roomName <- RoomLoginCtrl

The odd thing is that when I debug I can see that roomName is getting the resolved value. The app crashes later, not other operation done (not that I know of it).

Why this thing is crushing?

Thanks!

Answer 1

From mixing both @micha's and @New Dev's comments I solved it by doing as follow:

added controllerAs: 'vm':

.when('/login/:uuid', {
            templateUrl: 'views/login.html',
            controller: 'RoomLoginCtrl',
            controllerAs: 'vm'
            resolve: {
              roomName: function($route, ServerService) {
                var uuid = $route.current.params.uuid;
                return ServerService.getRoomName(uuid); //returns promise
              }
            }
})

And also removed the ng-controller="RoomLoginCtrl as vm" from the temolateUrl tag:
Changed this:

<div ng-controller="RoomLoginCtrl as vm">

To this:

<div>

Thanks for the help!