angularjs - [JavaScript][Angular]: TypeError: Cannot read property 'getCityData' of undefined -

this question has been asked many times before , i've tried answers not seem solve problem i'm facing. i'm new angular , trying pass value controller factory can retrieve json information through api. while i'm able value html controller, next step giving me typeerror: cannot read property 'getcitydata' of undefined. controller code follows:

app.controller('maincontroller', ['$scope', function($scope, httpgetter) {   var successfunction = function(data) {         $scope.data = data;     }      var errorfunction = function(data) {         console.log("something went wrong: " + data);     }      $scope.cityname = '';     $scope.getcityname = function(city) {         $scope.cityname = city;         httpgetter.getcitydata($scope.cityname, successfunction, errorfunction);     }; }]); 

the factory code follows:

app.factory('httpgetter', ['$http', function($http){  return {         getcitydata: function(query, successfunction, errorfunction){             return $http.get('http://api.apixu.com/v1/current.json?key=myappkey&q=' + query).             success(successfunction).             error(errorfunction);         }     };   }]); 

i've replaced app key string "myappkey" safe code contains appropriate key. also, helpful if bit of insight on how function invocations happen because there seem lot of function callbacks happening.

getting undefined because of service not getting injected.

try:

app.controller('maincontroller', ['$scope', 'httpgetter', function($scope, httpgetter) 

also said, on safer side aren't using right key, using application can key checking network calls. so, ideally, 1 should make call backend, , backend send call along secured key desired api endpoint , return response data front-end.