Sending received Rest data in service file to controller angularjs

Question

I am new to angular js and I have a problem sending the received data from my service file to controller, which ultimately binds to my html. Can someone please help me resolve this problem. Thank you.

service file

"use strict";

angular.module("fleetListModule").service("fleetsService",

 function ($http) {
             this.getTrucks = function () {
                 console.log("before calling webservice");
                 $http.get('http://localhost:8080/login/rest/truckservices/getTrucks?truckId')
                 .success(function (data){
                     var trucks = data;
                     console.log("after calling webservice my data is", trucks);
                     return trucks;
                 });

             };            
         });

---

controller

"use strict";

angular.module("fleetListModule").controller("fleetListController",
    ['$scope', 'fleetsService',  
function ($scope, fleetsService) {

   var truckData = fleetsService.getTrucks();
   console.log("inside fleet service", truckData);
   $scope.trucks = truckData;        
    console.log("outside fleet service", truckData);
 }]);

---

html

<div class="panel1 panel-primary">
    <div class="panel-heading" align="center">TRUCKS</div>
    <table class="table  table-condensed table-striped " >
        <thead class="truck-list-header">
            <tr class="truck-list-header">
                <th>Truck ID</th>
                <th>Status</th>
                <th>Dest.</th>
                <th>Alerts</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="truck in trucks" ng-click="summaryData(truck)" class="truck-list-body">
                <td>
                    <div><i class="fa fa-truck truck-icon"></i>{{truck.truckId}}</div>
                </td>
                <td>
                <span class="label {{truck.label}}">{{truck.status}}</span>
                </td>
                <td>{{truck.destination}}</td>
                <td>
                    <div><i class="fa fa-exclamation-triangle alert-icon"></i>{{truck.alerts}}</div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

---

json data receiving from localhost 8080

{"truckId":"111","status":"Running","destination":"Winnipeg","alerts":"Nothing"}

Answer 1

Your service function doesn't return anything. Also return inside success does nothing

Simplified version of service using then since success is deprecated:

this.getTrucks = function() {
  console.log("before calling webservice");
  // return the promise created by `$http`
  return $http.get('http://localhost:8080/login/rest/truckservices/getTrucks?truckId')
    .then(function(responsePromise) {
      var trucks = responsePromise.data;
      console.log("after calling webservice my data is", trucks);
      return trucks;
    });

};

In controller

 fleetsService.getTrucks().then(function(truckData) {
   // assign data inside promise callback
   console.log("inside fleet service", truckData);
   $scope.trucks = truckData;

 });
 // can't do this one , it will run before data has been returned from server    
 console.log("outside fleet service", $scope.trucks);//will be undefined