AngularJs databinding from factory [duplicate] - angularjs

Question

This question already has an answer here:
AngularJS Variable in service is not updating in view?
(1 answer)
Closed 5 years ago.
I'm new to AngularJs, and I've got a little problem without using $scope in my factory module.
I've got a GET function that's used by a controller via the factory, and it's supposed to return a list from my db as json
and show it on the html using ng-repeat. For a reason I couldn't find a solution for, it doesn't. My only guess was that there's a problem regarding databinding from the factory to the html.
How do I bind the returned json to a variable and bind that variable to my html?
This function worked before I created the factory, but without using the $scope
I'm pretty lost.
I hope I was able to explain myself correctly.
Factory:
(function() {
angular.module("myApp").factory('appServicesProvider',function( $http ) {
var restURL = "http://localhost:8080/Project/rest/api/";
function getAllRows(allRows){
$http.get(restURL).then(
function(response){
allRows = response.data.coupon;
}
);
}
return{getAllRows:getAllRows}
Controller:
(function() {
angular.module("myApp")
.controller("AdminController",function($scope, $http,
appServicesProvider) {
// I know that this method of scoping a service is not best and/or recommended,
//it just works better for me with the admin controller.
$scope.appServicesProvider = appServicesProvider;
HTML:
<div id="getAllRowsDiv">
<table class="table table-hover">
<thead>
<tr>
// list details
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="coupon in allRows">
// list
</tr>
</tbody>
</table>
<button class="btn btn-success" ng-
click="appServicesProvider.getAllRows()" >Get All Rows</button>
</div>

Answer 1

Use $q
(function() {
angular.module("myApp").factory('appServicesProvider',function( $q, $http ) {
var restURL = "http://localhost:8080/Project/rest/api/";
function getAllRows(allRows){
var deffer = $q.defer();
$http.get(restURL).then(
function(response){
deffer.resolve(response.data.coupon;)
},function(error){
deffer.reject(error)
}
);
return deffer.promise
}
return{getAllRows:getAllRows}
and in controller
$scope.getRows = function(){
appServicesProvider.getAllRows().then(function(res){
$scope.allRows = res;
},function(err){
alert(err)
})
}
$scope.getRows();

Answer 2

In the service, return the http promise:
app.factory('appServices',function( $http ) {
return { getAllRows:getAllRows }
var restURL = "http://localhost:8080/Project/rest/api/";
function getAllRows(){
͟r͟e͟t͟u͟r͟n͟ $http.get(restURL)
.then(function(response){
var allRows = response.data.coupon;
͟r͟e͟t͟u͟r͟n͟ allRows;
});
}
});
In the controller, use the .then method to extract the data:
app.controller("AdminController",function($scope, $http, appServices) {
var promise = appServices.getAllRows();
promise.then(function(allRows) {
$scope.allRows = appRows;
});
});