javascript - AngularJS Search Form throws undefined error -

i've built simple search form in angularjs undefined error.

the code follows list controller:

var phonecatcontrollers = angular.module('phonecatcontrollers', []);  phonecatcontrollers.controller('phonelistctrl', ['$scope', 'phone',   function($scope, phone) {     $scope.phones = phone.query();     $scope.orderprop = 'age';   }]); 

and search controller as:

phonecatcontrollers.controller('searchctrl', ['$scope', 'phone',      function ($scope, $http) {         $scope.url = 'phones.json';         // function executed on button click (ng-click="search()")         $scope.search = function() {              // create http post request             // data holds keywords             // request json request.             $http.post($scope.url, { "data" : $scope.keywords})             .success(function(data, status) {                 $scope.status = status;                 $scope.data = data;                 $scope.result = data; // result             })             .error(function(data, status) {                 $scope.data = data || "request failed";                 $scope.status = status;                      });         }     }]); 

the html looks search form:

<div ng-controller="searchctrl">     <form class="well form-search">         <label>search:</label>         <input type="text" ng-model="keywords" class="input-medium search-query" placeholder="keywords...">         <button type="submit" class="btn" ng-click="search()">search</button>     </form>     <div ng-model="result">     {{result}}     </div> </div> 

the error undefined not function line: $http.post($scope.url, { "data" : $scope.keywords}).

can point me in right direction?

it's not doing query string on url it's not becoming part of history stack.

the service looks like:

phonecatservices.factory('phone', ['$resource',   function($resource){     return $resource('phones/:phoneid.json', {}, {       query: {method:'get', params:{phoneid:'phones'}, isarray:true}     });   }]); 

so in short... why getting undefined error? , why isn't query string being passed?

mistake here in line -

phonecatcontrollers.controller('searchctrl', ['$scope', 'phone',  

it should

phonecatcontrollers.controller('searchctrl', ['$scope', '$http',  

you should pass $http, not phone