Retrive value from JSON using service in AngularJS?
<p>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.</p>

<p>HTML: I have an <code>index.html</code> file into which I load this HTML:</p>

<pre><code>&lt;div ng-controller="comp"&gt;
    {{capcino}}
&lt;/div&gt;
</code></pre>

<p>Controller: </p>

<pre><code>var app = angular.module("retailapp");

app.controller("comp", function($scope, elecservice){
    $scope.capcino = elecservice.getval();
});
</code></pre>

<p>Service:</p>

<pre><code>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;
        });
    }
}
</code></pre>

<p>Routing:</p>

<pre><code>var app = angular.module("retailapp", ['ngRoute']);

app.config(function($routeProvider){
    $routeProvider.when("/computer", {
        templateUrl : "computer.html",
        controller : "comp"
});
</code></pre>

<p>JSON:</p>

<pre><code>{"namet" : "naysan"}
</code></pre>

<p>I want to display the value "capcino" in expression in HTML. I'm getting <code>undefined</code> for that value. Kindly help with explanation. Thanks in advance.</p>