object - Angularjs; use $http in service returns reference instead of actual data -

i'm using services directive in angularjs not factory , need populate json file local variable;

/* contains projects on town */ lemaireservicess.service('cityservice', function($http) {      // json regions , cities loader     this.cities = [];      // initcities      this.initcities = function() {         this.cities = $http.get('data/census/cities.js').success(function(data) {             return data;         });         return this.cities;     };      // city info     this.getcity = function() {         return this.cities;     }; }); 

and in controller have

// saved game controller lemairecontrollers.controller('gamecorectrl', function($scope, cityservice) {      /* control town project slides */     cityservice.initcities();     $scope.city = cityservice.getcity();      console.log($scope.city); }); 

but instead of returning actual data, returns;

object {then: function, catch: function, finally: function, success: function, error: function} 

you can use watch make work (see plunker)

var app = angular.module('plunker', []);  app.controller('mainctrl', function($scope,cityservice) {   //$scope.cities = [];   $scope.service = cityservice;   cityservice.initcities();     $scope.$watch('service.getcity()', function(newval) {     $scope.cities = newval;     console.log(newval)   });   });  app.service('cityservice', function($http) {   var = this;   this.cities = [];    this.initcities = function() {       $http.get('data.js').success(function(data) {           that.cities = data.cities;       });   };    this.getcity = function() {       return this.cities;   }; });