remove clicked item angularjs

I have a click event where I want to remove from scope an element with a given id

<a data-placement="bottom" ng-click='Off(product.productid)'><i class="fa fa-times"></i></a>

app.js

'use strict';

var konfigurator = angular.module('konfiguratorApp', [
    'ngRoute',
    'konfiguratorApp.filters',
    'konfiguratorApp.services',
    'konfiguratorApp.directives',
    'konfiguratorApp.controllers',
    'ui.bootstrap',
    'xeditable',
    'ngSanitize'
], function($interpolateProvider) {
    $interpolateProvider.startSymbol('<%');
    $interpolateProvider.endSymbol('%>');

}).config(['$routeProvider', function($routeProvider) {
        $routeProvider.when('/',
                {
                    templateUrl: '/site/app/partials/products.php',
                    controller: 'Configurator',
                    resolve: {
                        products: function(ConfigurationService) {
                            return ConfigurationService.get();
                        }
                    }
                });

services.js

'use strict';

/* Services */


// Demonstrate how to register services
// In this case it is a simple value service.
angular.module('konfiguratorApp.services', []);

konfigurator.factory("ConfigurationService", function($http) {
  return {
    get: function() {
      return $http.get('/api/products/');
    }
  };
});

Controller.js

angular.module('konfiguratorApp.controllers', [])
        .controller('Configurator', ['$scope', 'products',
            function($scope, products) {
                $scope.products = products.data.data;
                $scope.totalItems = products.data.total;
                $scope.per_page = products.data.per_page;
                $scope.currentPage = products.data.current_page;

            }]);

function Events($scope, $modal, $log) {
    $scope.visible = true;
    $scope.items = ['item1', 'item2', 'item3'];
    $scope.modalEdit = function() {
        var modalInstance = $modal.open({
            templateUrl: '/edit',
            windowClass: 'xx-dialog',
            controller: ModalInstanceCtrl,
            resolve: {
                items: function() {
                    return $scope.items;
                }
            }
        });
    };

    $scope.Off = function(idx) {
        console.log($scope.product);
        $scope.product.slice(idx,1)
        alert($scope.product[idx]);
    };
    $scope.toggle = function() {
        $scope.visible = !$scope.visible;
    };
}

how would I do this?

Update

I misunderstood the array slice. I wanted to identify with the id the targeted but the correct way to do is

<a data-placement="bottom" ng-click='Off(product)'><i class="fa fa-times"></i></a>

$scope.Off = function(product) {

    var index = $scope.products.indexOf(product);
    if (index != -1) {
      $scope.products.splice(index, 1);
    }
};

but than how would I make a restapi update with the product ID if I want pause?