Delete record using angular

PROBLEM

Hello! I want to delete record using angular. So that must look like that: I click button "X" (delete) and record must be deleted.

WHAT I GOT FOR NOW

I don't know if all is correct, but there is my code:

html

<div ng-repeat="lists in listsdata.lists">
                    <div id="DIV_24" close-on-outside-click="div.popup_information">
                        <button ng-click="lists.show = !lists.show" id="MORE_BUTTON">:</button>
                        <div class="popup_information" ng-show="lists.show">

                                <button id="DELETE_BUTTON" ng-click="del_list()">X</button>

                            <a href="">
                                <button id="EDIT_BUTTON">E</button>
                            </a>
                        </div>
                        <a href="#/{{lists.id}}">
                            <div id="DIV_25">
                                {{lists.name}}
                            </div>
                            <div id="DIV_26">
                            </div>
                    </div></a>
                </div>

angular

myApp.controller('listsController', ['$scope', '$log', '$http',
    function($scope, $log, $http){

        $http({
            method: 'GET',
            url: 'http://localhost/anydocopy/public/lists'
        })
            .success(function (d) {
                console.log(d);
                $scope.listsdata = d;
            });

        $scope.key = function($event){
            console.log($event.keyCode);
            if ($event.keyCode == 13) {
                var list = {
                    name: $scope.listname
                };
                $scope.listname = '';
                  $http({
                    method: 'POST',
                    url: 'http://localhost/anydocopy/public/lists',
                    data: list
                })
                    .success(function () {
                        console.log('true');
                        $http({
                            method: 'GET',
                            url: 'http://localhost/anydocopy/public/lists'
                        })
                            .success(function (d) {
                                console.log(d);
                                $scope.listsdata = d;
                            });
                    })
                    .error(function () {
                        console.log('false');
                    });
            }};

        $scope.del_list = function () {
            $http({
                method: 'DELETE',
                url: 'http://localhost/anydocopy/public/lists/'+ $scope.listsdata.lists.id
            });
            console.log($scope.listsdata.lists)
        }

      }]);

laravel controller

public function delete($id)
{
    $response['lists'] = Lists::findorfail($id)->delete();

    return Response($response, 201);
}

laravel route

Route::delete('lists/{id}', 'ListsController@delete');

So for now when I click button, I cant set right url in agular function, because I can't get that id from $scope.listsdata.. I can get all array, but how to get only id I want? So if I click on button what is on list with id=1 so in angular function must work like method=delete and url= url+id. How to do that, please help.

via Chebli Mohamed