AngularJS xeditable: update server data

Question

I am using AngularJS and to show products in a table to my users. Here the user can filter the table using categories or other key words. But the user has to be able to edit the product table, like editing product names or prices and these data has to be altered also in my database of course. Now I am using xeditable which works great and I am able to get the productID which I have to change and the function to change the data gets called but that's it. Here can you see my code:

AngularJS

categorieFilter = angular.module("categorieFilter", ["xeditable"])
categorieFilter.run(function(editableOptions) {
  editableOptions.theme = 'bs3'; // bootstrap3 theme. Can be also 'bs2', 'default'
});

categorieFilter.controller("catFilter", ["$scope", "store", function($scope, store){
    $scope.search = "";
    $scope.products = [];
    $scope.categories = [];

    $scope.postname = function ($prodid){
        $http.get('api/editproduct/id/$scope.product.name')        
        .success(function(results){
        })
        .error(function(data, status){
            console.error("Category add error: ", status, data);
        });    
    };      

    store.getCategories().then(function(data){
        $scope.categories = data;
    })
    store.getProducts().then(function(data){
        $scope.products = data;
    })    

    $scope.filterProductsByCats = function(category){
    $scope.search = category;
    };  

}])

categorieFilter.factory('store', function($http, $q){
    function _getCategory (){
        var deferred = $q.defer();
        $http.get('api/categories').success(function (data) {
                deferred.resolve(data);
            })
        return deferred.promise;
    }

    function _getProducts (){
        var deferred = $q.defer();
        var prods = [];
        $http.get('api/products').success(function (data) {
            for(var i = 0;i<data.length;i++)
            {
                prods[i] = {id: data[i][0], name: data[i][1], category: data[i][3], price: data[i][2]};            
            }
            deferred.resolve(prods);
        })
        return deferred.promise;
    }
        return {
         getCategories: _getCategory,
         getProducts : _getProducts
        };

});

HTML

<div ng-app="categorieFilter" ng-cloak="" ng-controller="catFilter">
<div class="input-group">
 <input type="text" name="table_search" class="form-control input-sm pull-right" ng-model="search" placeholder="Search"/>
<div class="input-group-btn">
 <button class="btn btn-sm btn-default">
  <i class="fa fa-search"></i>
 </button>
</div>
</div>
<div>
 <input type="submit" class="btn btn-success" style="margin:10px; width:30%;" ng-repeat="cat in categories" ng-click="filterProductsByCats(cat.categoryName)" value="{{cat.categoryName}}">
</div>
<table class="table table-hover">
 <tr style="background-color:#ddd;">
  <th colspan="4" style="text-align:left; font-size:16px;"> Category </th>
  <th colspan="4" style="text-align:left; font-size:16px;"> Product </th>
  <th colspan="4" style="text-align:left; font-size:16px;"> Price </th>
 </tr>
 <tr ng-repeat="product in products | filter:search | orderBy: 'category'">
  <td colspan="4">{{product.category}}</td> 
  <td colspan="4"  onaftersave="postname(product.id)" editable-text="product.name">{{product.name}}</td>
  <td colspan="4" editable-text="product.price">{{product.price}}</td>
 </tr> 
</table>

I(m getting error:

ReferenceError: $http is not defined

So what am I doing wrong here? How can I update the required data in my database after changing it in my table using angular and xeditable..?

Answer 1

I updated my controller and function like this and now it works fine:

categorieFilter.controller("catFilter", ["$scope", "$http", "store", function($scope, $http, store){
    $scope.search = "";
    $scope.products = [];
    $scope.categories = [];

    $scope.postname = function ($prodid, $prodname){
        alert($prodname);
        $http.get('api/editproduct/'+$prodid+'/'+$prodname)        
        .success(function(results){
        })
        .error(function(data, status){
            console.error("Category add error: ", status, data);
        });    
    };