javascript - service is returning undefined in the array in angularjs -

i facing trouble angularjs script.

background: trying determine location of user, have written business logic in service returning location of user.

problem : result getting in console below :

[undefined] landingpage.js:11 undefined landingpage.js:11 undefined

var app = angular.module("publicevents", ["geolocation"]);  app.controller("iterator", ["$scope", "$http", "locationservice1", function($scope, $http, locationservice1){     $scope.targetcity = [];     $scope.targetcity.push(locationservice1.location());      console.log($scope.targetcity);     $scope.$watch(function () { return locationservice1.citynamearray; },             function (value) {         $scope.targetcity = value;         console.log($scope.targercity);     }     );  }]);    app.service("locationservice1",['$http','$window', function( $http, $window){     var access = this;     this.location = function(){         $window.navigator.geolocation.getcurrentposition(function(position) {             access.lat = position.coords.latitude;             access.long = position.coords.longitude;              access.locationdata = [];             access.citynamearray = [];              /*var url = "http://maps.googleapis.com/maps/api/geocode/json?latlng=18.9750,72.8258&sensor=true";*/             var url = "http://maps.googleapis.com/maps/api/geocode/json?latlng="+access.lat+","+access.long+"&sensor=true";              //ajax call location             $http.get(url).then(function(response) {                 access.locationdata = response.data;                  if(access.locationdata.status == "ok" || access.locationdata.status==200 ) {                     angular.foreach(access.locationdata.results, function(value, key){                         var len = value.address_components.length;                         for(var = 0; i< len; i++){                             if(value.address_components[i].types[0] =="locality" || value.address_components[i].types[0] =="sublocality_level_1"){                                 access.citynamearray.push(value.address_components[i].long_name);                             }                         }                     });                  };             });              return access.citynamearray;         });     }; }]); 

seems need return data async call , returning value outside function. i'd suggest use promise pattern in such situation.

this.location = function(){     $window.navigator.geolocation.getcurrentposition(function(position) {         access.lat = position.coords.latitude;         access.long = position.coords.longitude;          access.locationdata = [];         access.citynamearray = [];          /*var url = "http://maps.googleapis.com/maps/api/geocode/json?latlng=18.9750,72.8258&sensor=true";*/         var url = "http://maps.googleapis.com/maps/api/geocode/json?latlng="+access.lat+","+access.long+"&sensor=true";          //return promise here..         return $http.get(url).then(function(response) {             access.locationdata = response.data;              if(access.locationdata.status == "ok" || access.locationdata.status==200 ) {                 angular.foreach(access.locationdata.results, function(value, key){                     var len = value.address_components.length;                     for(var = 0; i< len; i++){                         if(value.address_components[i].types[0] =="locality" || value.address_components[i].types[0] =="sublocality_level_1"){                             access.citynamearray.push(value.address_components[i].long_name);                         }                     }                 });              };             return access.citynamearray; //returned success callback         });       }); }; 

inside controller need use .then function data service loacation function. doing console.log when doing async call doesn't return anything.

locationservice1.location().then(function(data){ //success callback.    $scope.targetcity.push(data) },function(error){ //error callback.    console.log(error) });