How to hide a table column based on a a value angular?

Question

I have this table and a button to disapprove. What this disapprove button basically do is it sets a boolean value to the is_approved column in the db. If i press the disapprove button it will make the value 0 and if i press the reapprove button it will make the value 1. What i want to do is when i press the disapprove button i dont want to show that row in the table. Is there a way i can do that? Below are my codes-

html -

<div class="container-fluid" ng-controller="TablesTripsController">
    <div class="row">
        <div class="col-xs-12">
            <h1>Trips</h1>

                <table class="table">
                    <thead>
                        <tr>
                            <th ng-repeat="heading in data.headings">{{heading}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="trip in trips" ng-click="selTrip(trip)">
                            <td>{{trip.id}}</td>
                            <td>{{trip.from}}</td>
                            <td>{{trip.to}}</td>
                            <td>{{trip.hour}}</td>
                            <td>{{trip.minute}}</td>
                            <td>{{trip.ride_reg}}</td>
                            <td>{{trip.ride_contact_no}}</td>
                            <td>{{trip.ride_driver_name}}</td>
                            <td>{{trip.pickup_address}}</td>
                            <td>{{trip.dropoff_address}}</td>
                        </tr>

                    </tbody>
                </table>
            </div>
        </div>
        <div class="row">
        <div class="col-xs-12">
            <h1>Reservations</h1>

                <table class="table">
                    <thead>
                        <tr>
                            <th ng-repeat="heading in data1.headings">{{heading}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="reservation in reservations">
                            <td>{{reservation.id}}</td>
                            <td>{{reservation.user.fb_id}}</td>
                            <td>{{reservation.user.name}}</td>
                            <td>{{reservation.user.phone}}</td>
                            <td>{{reservation.user.email}}</td>
                            <td>{{reservation.day}}/{{reservation.month}}/{{reservation.year}}</td>
                            <td>
                                <button ng-click="disapprove(reservation, 0)" ng-show="reservation.is_approved">Disapprove</button>
                                <button ng-click="disapprove(reservation, 1)" ng-show="!reservation.is_approved">Approve</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

</div>

Controller-

.controller('TablesTripsController', ['$scope', '$http', 'AuthService', '$location', function($scope, $http, AuthService, $location) {
        'use strict';

        if (!AuthService.getLoggedIn()) {
          $location.path('/login');
        }

        $scope.trips = [];
        $http.get('/api/trips').success(function(response) {

            $scope.trips= response.trips;
        });
        $scope.data = {
            headings: ['Id', 'From', 'To', 'Hour', 'Minute', 'Reg No.', 'Contact', 'Driver Name','Pick Up', 'Drop Off']
        };
        $scope.selTrip= function(trip){
            $scope.reservations = [];

            $http.get('/api/trips/'+trip.id+'/reservations').success(function(response) {
                $scope.reservations = response.reservations;
            });
        };
        $scope.disapprove= function(reservation, yesno){
            $scope.approvereservations = true;
            $http.get('/api/admin/reservations/'+ reservation.id+'/'+yesno).success(function(response) {
                reservation.is_approved = yesno;
                console.log(reservation, reservation.is_approved, typeof reservation.is_approved)
                // $scope.approvereservations= response.reservations.is_approved;
            });
        };

        $scope.data1 = {
            headings: ['Reservation ID','User ID', 'User Name', 'User Phone', 'User Email', 'Date','Approve?']
        };
    }]);

Answer 1

You can use ng-show directive to show/hide the record row. Just add this directive to the repeting tr: ng-show="reservation.is_approved"

See the code below

<tr ng-repeat="reservation in reservations" ng-show="reservation.is_approved">
                        <td>{{reservation.id}}</td>
                        <td>{{reservation.user.fb_id}}</td>
                        <td>{{reservation.user.name}}</td>
                        <td>{{reservation.user.phone}}</td>
                        <td>{{reservation.user.email}}</td>
                        <td>{{reservation.day}}/{{reservation.month}}/{{reservation.year}}</td>
                        <td>
                            <button ng-click="disapprove(reservation, 0)" ng-show="reservation.is_approved">Disapprove</button>
                            <button ng-click="disapprove(reservation, 1)" ng-show="!reservation.is_approved">Approve</button>
                        </td>
                    </tr>