javascript - AngularJS: Service call API and return JSON -

i need pass value input field on view using service. service should call webapi2 , receives valid json response.

however, either getting promise object, cannot resolve (even ".then()"), or if i'm using factory won't compile seems not implement $get method.

the json object i'm returning valid.

view :

<div class="input" ng-controller="inputcontroller ctrl"> <input ng-model="inputdata" /> {{inputdata}}     <button ng-click="ctrl.gibdaten(inputdata)">senden</button>     {{cooledaten}} </div> 

controller :

module googlemapsapp { myapp.myappmodule.controller("inputcontroller",     ["$scope", "mapsservicecustom",         function ($scope, mapsservicecustom) {             $scope.leingabedaten = $scope.inputdata;             this.gibdaten = function () {                 $scope.cooledaten = mapsservicecustom.gibdaten().then();                 console.log($scope.cooledaten);             } }]); 

}

service:

module googlemapsapp { myapp.myappmodule.service("mapsservicecustom",     ["$http",         function ($http) {             this.gibdaten = function (leingabe) {                 console.log(leingabe);                 console.log($http.get("api/getdistancedata/" + leingabe + "/cologne")                     .then(function(data) {                         return data; 

controller:})); return $http.get("api/getdistancedata/" + leingabe + "/cologne") .then(function (data) { return data; }); //return $http.get("api/getdistancedata/" + leingabedaten1 + "/cologne"); } } ]);

}

console log:

object { $$state: object }maps.servicecustom.js:14:17

object { $$state: object }inputcontroller.js:8:17

if check $$state:object contains desired data.

using factory leads me following error:

https://docs.angularjs.org/error/$injector/undef?p0=mapsservicecustom

so doing wrong? how implement intend?

you need pass function part... put function in controller , set returning response variable...

myapp.myappmodule.controller("inputcontroller",     ["$scope", "mapsservicecustom",         function ($scope, mapsservicecustom) {             $scope.leingabedaten = $scope.inputdata;             this.gibdaten = function () {                 mapsservicecustom.gibdaten().then(function(response){                     // set response variable                     $scope.cooledaten = response;                 });             }  }]);