Retrive value from JSON using service in AngularJS? - angularjs

Question

I'm a beginner in AngularJS. I'm here trying to fetch the data from JSON using service and display it. I'm having separate files for controllers, services. I'm unable to find out what I'm doing wrong here. I learned that we return an object in case of factory but, I'm not sure how to return the value when using services. The code that I tried is below.
HTML: I have an index.html file into which I load this HTML:
<div ng-controller="comp">
{{capcino}}
</div>
Controller:
var app = angular.module("retailapp");
app.controller("comp", function($scope, elecservice){
$scope.capcino = elecservice.getval();
});
Service:
angular.module("retailapp").service("elecservice", serjson);
function serjson($http){
var val = "";
this.getval = function(){
$http.get("/elec.json").success(function(res){
val = res.namet;
return val;
});
}
}
Routing:
var app = angular.module("retailapp", ['ngRoute']);
app.config(function($routeProvider){
$routeProvider.when("/computer", {
templateUrl : "computer.html",
controller : "comp"
});
JSON:
{"namet" : "naysan"}
I want to display the value "capcino" in expression in HTML. I'm getting undefined for that value. Kindly help with explanation. Thanks in advance.

Answer 1

Write as follow:
var app = angular.module("retailapp");
app.controller("comp", function($scope, elecservice){
elecservice.getval().then(function(data){
$scope.capcino = data;
});
});

Answer 2

It's a promise so it sets $scope.capcino after it returns. Until that return occurs $scope.capcino is undefined.
var app = angular.module("retailapp");
app.controller("comp", function($scope, elecservice){
elecservice.getval().then(function(data){
$scope.capcino = data;
});
});

Answer 3

Just change your controller to store the data.
$scope.yourFunc = function(params){
YouService.function(params).then(function(result){
$scope.yourVar = result.data;
}
})
}
}