get an undifined $scope in angularJS using api - angularjs

Question

I'm new in angularJS and I got a small problem which is :
(i'll explain some details)
I have a SQL database which is deployed in Azure and I get the data from web services.
when I want to retrieve data from the database and expose it in the view , it works.
this is the controller :
var app = angular.module('ngdemoApp.controllers', []);
app.controller('CustomerViewCtrl', ['$scope', '$routeParams', 'ShowCustomerFactory','LikeProfilCustomerFactory','ShowManagerFactory',
function ($scope, $routeParams, ShowCustomerFactory,LikeProfilCustomerFactory,ShowManagerFactory) {
$scope.incrementLikeProfil = function (id) { LikeProfilCustomerFactory.likeProfil({id:$scope.customer.Id});
$scope.customer = ShowCustomerFactory.show({id: $routeParams.id});
}
$scope.customer = ShowCustomerFactory.show({id: $routeParams.id});
}]);
notice that the customer is in the database so it has properties in other word if I do {{customer.Id}} this expression shows me the value in the view.
However, when I want to use the $scope.customer in the controller like this
app.controller('CustomerViewCtrl', ['$scope', '$routeParams', 'ShowCustomerFactory','LikeProfilCustomerFactory','ShowManagerFactory',
function ($scope, $routeParams, ShowCustomerFactory,LikeProfilCustomerFactory,ShowManagerFactory) {
$scope.incrementLikeProfil = function (id) {
LikeProfilCustomerFactory.likeProfil({id:$scope.customer.Id});
$scope.customer = ShowCustomerFactory.show({id: $routeParams.id});
}
$scope.customer = ShowCustomerFactory.show({id: $routeParams.id});
$scope.test = $scope.customer.Id;
}]);
the $scope.test cannot be filled by $scope.customer.Id, at the same time the $scope.customer is filled and the view can display the value of customer but when I want to display the $scope.test in the view, i didn't get any responce.
Is there any solution ? Thank you

Answer 1

$scope.customer = ShowCustomerFactory.show({id: $routeParams.id});
If the above statement is making a service request and fetching data from server. This will be async and won't be available.
But in the next statement itself, you are setting
$scope.test = $scope.customer.Id;
At this point of time, $scope.customer may be undefined. That's why you're not getting the value.
You must put this statement in the then() function of promise $scope.test = $scope.customer.Id;
So in your service, return promise using $http or $q. And in your controller:
ShowCustomerFactory.show({id: $routeParams.id}).then(function(data) {
$scope.customer = data;
$scope.test = $scope.customer.id;
});
Another workaround would be :
Initially set
$scope.customer = {};

Answer 2

Also here is my service I use $resource :
services.factory('ShowCustomerFactory', function ($resource) {
return $resource(url + '/customerService/getCustomer?id=:id', {}, {
show: { method: 'GET',params: {id: '#id'} }
});
});