Why is data overwritten?

Question

Angular

In Angular.

<table class="table table-striped">

                  <tr ng-repeat="shift in shifts">
                    <td >{{shift.id}} </td>
                    <td>{{shift.started_at}} </td>
                    <td >{{shift.finished_at}} </td>
                    <td ng-init="getOrders(shift.id)">{{shift_order}}</td>

                  </tr>
                </table>

Controller:

$scope.getOrders = function(id) {

        Order.getOrders(id)
            .success(function(data) {
                $scope.shift_order=data;

            })
            .error(function(data) {
                console.log(data);
            });

    };

Service:

getOrders : function(id) {
             return $http({
                method: 'GET',
                url: '/api/orders/shift_order/'+id,
                headers: { 'Content-Type' : 'application/x-www-form-urlencoded' },
             });

        },

In Laravel: Route
..
Route::get('orders/shift_order/{id}', '[email protected]_order');
Controller:

public function shift_order($id)
    {

    return [
                'shifts'=> Shift::find($id)
            ];
    }

Gives the same data for the last id...

Answer 1

There is only one $scope.shift_order, and you constantly overwrite it with your getOrders in a loop.....
Either $scope.shift_order[shift.id] i.e. an array with values, or we make a directive for shift order and then for each of its inclusion in the DOM there will be its own scope.