How to load json data in controller using services in angular? - ruby-on-rails

Question

I am trying to display json data which I am getting from my rails controller in my views. But I believe I am missing something while calling the service in my app controller.
**My service**
.service("articles", function($http){
var o = this;
o.getall = function(){
return $http.get('/articles.json').then(function(response){
console.log(response.data);
return response.data;
});
};
});
**My controller**
.controller('FirstCtrl', function($scope, articles, Data){
var first = this;
first.message = "Welcome!"
first.data = articles.getall();
});
**Angular route**
$stateProvider.state("first", {
url : "",
controller : "FirstCtrl as first",
templateUrl: "templates/first.html"
});
First.html
<h1> Angular-rails </h1>
<h2>{{first.message}}</h2>
<div ng-repeat="article in first.data">
<h2>{{article.title}}</h2>
<h2>{{article.description}}</h2>
</div>

Answer 1

return the promise from service to controller, like this
*My service**
.service("articles", function($http){
var o = this;
o.getall = function(){
return $http.get('/articles.json');
};
});
**My controller**
.controller('FirstCtrl', function($scope, articles, Data){
var first = this;
first.message = "Welcome!"
articles.getall().then(function(response){
console.log(response.data);
first.data = response.data;
});;
});
**Angular route**
$stateProvider.state("first", {
url : "",
controller : "FirstCtrl as first",
templateUrl: "templates/first.html"
});
First.html
<h1> Angular-rails </h1>
<h2>{{first.message}}</h2>
<div ng-repeat="article in first.data">
<h2>{{article.title}}</h2>
<h2>{{article.description}}</h2>
</div>