AngularJS .then on a promise -> cannot read property then of null / undefined - angularjs

Question

I have a question about the directives and the .then method.
Here is my controller code (I use it to pass variables to my directive) :
angular
.module('thermofluor')
.controller('ExperimentsController', ExperimentsController)
ExperimentsController.$inject = ['$state', '$stateParams', 'PlatesService', '$timeout', '$q', '$scope'];
function ExperimentsController($state, $stateParams, PlatesService, $timeout, $q, $scope) {
var exp = this;
//console.log($stateParams);
exp.barcode = $stateParams.barcode;
exp.plate = $stateParams.plate;
exp.current_user = "";
exp.users = [];
exp.curves = [];
exp.summary = [];
exp.selected_wells = [];
// liste experiments
console.log($stateParams.id);
getPlateById($stateParams.id);
function getUsers()
{
$timeout(function() {
exp.users = PlatesService.customShow(exp.plate.id, "users")
.then(getUsers)
.catch(getUsersFailed);
function getUsers ( data ) {
exp.users = data[0];
return exp.users;
}
function getUsersFailed ( e ) {
var newMessage = 'Failed To Retrieve the users';
if (e.data && e.data.description) {
newMessage = newMessage + '\n' + e.data.description;
}
console.log( e );
e.data = newMessage;
return $q.reject(e);
}
});
}
function getPlateById(id)
{
$timeout(function() {
exp.plate = PlatesService.show(id)
.then(getPlate)
.catch(getPlateFailed);
function getPlate ( data ) {
exp.plate = data;
exp.curves[exp.plate.experiments[0].well] = [exp.plate.experiments[0].points, exp.plate.experiments[0].tm];
getUsers();
return exp.plate;
}
function getPlateFailed ( e ) {
var newMessage = 'Failed To Retrieve the plate';
if (e.data && e.data.description) {
newMessage = newMessage + '\n' + e.data.description;
}
console.log( e );
e.data = newMessage;
return $q.reject(e);
}
});
}
}
1 - I have a simple directive :
angular
.module('thermofluor')
.directive('legend', legend)
legend.$inject = ['$timeout', '$q'];
function legend($timeout, $q) {
var directive = {
link: link,
restrict: 'E',
templateUrl: '/crims/thermofluor/experiments/legend.html',
scope: {
selected_wells: '=',
current_user: '=',
plate: '='
}
};
return directive;
function link(scope, element) {
console.log("TESTT");
console.log(scope);
scope.plate.then(function (res) {
console.log(scope.selected_wells);
});
}
}
What I don't understand is why the selected_wells and current_user are empty and the plate is not empty. And also why sometimes I have one of these two errors:
TypeError: Cannot read property 'then' of null
TypeError: Cannot read property 'then' of undefined
I thinks it's because the plate is not already loaded (it's loaded by an ajax call) but it's not the utility of the .then to launch the function after the object load ?
Edit:
Here is the PlateService (I use restangular) :
angular.module('thermofluor')
.factory( 'PlatesService', PlatesService);
PlatesService.$inject = ['Restangular', 'RepositoryService', '$cacheFactory', 'tmConfig', 'tmCache'];
function PlatesService( Restangular, RepositoryService, $cacheFactory, tmConfig, tmCache )
{
RepositoryService.extend( PlatesService )
return new PlatesService();
function PlatesService()
{
var service = this;
var cache = tmCache.plates();
//Restangular.setDefaultRequestParams({api_token: ChiefService.getCurrentToken()});
RepositoryService.call(service, Restangular.withConfig( config ), 'plates', cache );
return service;
function config( RestangularConfigurer )
{
Restangular.setDefaultHttpFields({cache: cache});
return RestangularConfigurer.setBaseUrl(tmConfig.api);
}
}
}
And this plateservice use this RepositoryService
function RepositoryService( $cacheFactory)
{
RepositoryService.prototype = {
all:all,
filterAll:filterAll,
show:show,
customShow:customShow,
store:store,
update:update,
destroy:destroy,
restore:restore,
};
RepositoryService.extend = function (repository) {
repository.prototype = Object.create(RepositoryService.prototype);
repository.prototype.constructor = repository;
};
return RepositoryService;
function RepositoryService(restangular, route, cache)
{
console.log( cache );
this.restangular = restangular;
this.route = route;
this.cache = cache;
}
function all()
{
return this.restangular.all(this.route).getList();
}
function filterAll( filters )
{
return this.restangular.all(this.route).customGETLIST('', filters );
}
function show(uuid)
{
return this.restangular.one(this.route, uuid ).get();
}
function customShow(uuid, extend)
{
return this.restangular.one(this.route, uuid).customGET( extend );
}
function store( resource )
{
clear( this.cache );
return this.restangular.all(this.route).post( resource );
}
function update( resource )
{
clear( this.cache );
return this.restangular.one(this.route, resource.uuid).customPUT( resource );
}
function destroy( resource )
{
clear( this.cache );
return this.restangular.one(this.route, resource.uuid).remove();
}
function restore( resource )
{
clear( this.cache );
return this.restangular.all(this.route + '/' + resource.uuid + '/restore' ).post();
}
function clear( cache )
{
if(_.isUndefined( cache )) {
return;
}
cache.removeAll();
}
}