Update $http return data to html view - angularjs

Question

I am getting my data form angular service
.service('SelectedMemberDetail', function ($http) {
return {
get : function(id) {
return $http.get('/api/members/'+ id);
},
create : function(id) {
return $http.post('/api/members/'+ id);
},
delete : function(id) {
return $http.delete('/api/members/'+ id);
}
}
})
This is the controller function which calling that service.
$scope.show = function (user_id) {
$scope.selectedMember = SelectedMemberDetail.get(user_id);
}
And i am trying to get view in html like this
<h2>
<span class="glyphicon glyphicon-user mleft_10 icon_big"></span>
{{ selectedMember.firstName[0] }}
</h2>
<div>
<p class="clear_margin"><b>Address: </b>
{{ selectedMember.address[0] }}
</p>
<p><b>Contact: </b>{{ selectedMember.contact[0] }}</p>
</div>
I checked, the service function is returning json data, which is here,
_id: "552386cb880611101168ab4b"
address: ["pata nai", "text"]
contact: ["23456", "tel"]
email: ["anoop#email", "email"]
firstName: ["Anoop", "text"]
lastName: ["singh", "text"]
I am not able to see the updated data on browser. What's wrong with my code?

Answer 1

Use promise return by $http and then assign value.It is not showing anything because you are directly assigning promise to the assignment it will not show anything in the view.
SelectedMemberDetail.get(user_id).then(function(response){
$scope.selectedMember = response.data
});
SelectedMemberDetail.get(user_id).success(function(response){
$scope.selectedMember = response.data
});
There is two way to capture promise return from $http one is then and another is success.
Look at the Doc.

Answer 2

When you use $http.get it returns a promise not the data itself. You need to do this:
$scope.show = function (user_id) {
SelectedMemberDetail.get(user_id)
.success(function (result) {
$scope.selectedMember = result;
});
}
see more here:
https://docs.angularjs.org/api/ng/service/$http

Answer 3

I like this paradigm:
.service('SelectedMemberDetail', function ($http) {
return {
get : function(id) {
var member = {};
member.$promise = $http.get('/api/members/'+ id)
.success(function(data) {
angular.copy(data, member);
});
return member;
}
}
})
The get method returns a reference to the member right away. When the $http call completes successfully, it uses angular.copy to assign the member's properties, while preserving the reference.
That way you can still do this (main use case):
$scope.show = function (user_id) {
$scope.selectedMember = SelectedMemberDetail.get(user_id);
}
The member also has a $promise property, so if you need to handle success or error (edge use case):
$scope.selectedMember = SelectedMemberDetail.get(user_id);
$scope.selectedMember.$promise.success(function(data) {
// do something else with member
});