Angularjs $scope reference

[Ulhas Chaudhary]

I am using kendo UI grid with angular js, have filled the grid with angular. I have a dropdown in the header template on change event of the dropdown i need to bind the grid again with the dropdown filter how can i achieve this.
for binding the grid i have used angular factory.


Following is the controller

var recnfController = function ($scope, IRSService, bookingDataSource) {

    $scope.bookingType = {
        transport: {
            read: {
                url: 'Booking/BookingTypeList',
                contentType: "application/json",
                type: "GET"
            }
        }
    };

    $scope.bookingStatus = {
        transport: {
            read: {
                url: 'Booking/BookingStatusList',
                contentType: "application/json",
                type: "GET"
            }
        }
    };

    $scope.change = function (e) {
        var dataItem = e.sender._selectedValue;
        var selectedText = e.sender.text();
        var value = e.sender.value();
        alert(e.sender.text());
        $scope.mainGridOptions = bookingDataSource;
        console.log(e);
    }    

    $scope.mainGridOptions = bookingDataSource;

}

app.controller('recnfController', ['$scope', 'IRSService','bookingDataSource', recnfController]);

Following is the HTML part

<div ng-controller="recnfController">
    <div kendo-grid k-options="mainGridOptions"></div>
    <input type="text" ng-model="showName" />
    <script type="text/x-kendo-template" id="template">
        <div class="toolbar" ng-controller="recnfController">
            <div class="row">
                <div class="col-sm-6">
                    <label class="category-label" for="category">Booking Type:</label>
                    <select kendo-drop-down-list
                            k-placeholder="'Select Booking Type'"
                            k-data-text-field="'Text'"
                            k-data-value-field="'Value'" k-on-change="change(kendoEvent)"
                            k-data-source="bookingType"></select>
                </div>
                <div class="col-sm-6">
                    <label class="category-label" for="category">Booking Status:</label>
                    <select kendo-drop-down-list
                            k-placeholder="'Select Booking Status'"
                            k-data-text-field="'Text'"
                            k-data-value-field="'Value'"
                            k-data-source="bookingStatus"></select>
                </div>
            </div>
        </div>
    </script>
</div>

I need to bind the grid again on change event of dropdown, also how i can send the parameters.

Following is the factory used;

IRSapp.factory('bookingDataSource',['IRSService',
    function (IRSService) {
        var ServiceBaseUrl = "/Booking/ReconfirmList";
       
        var bookingList = {
            height: 400,
            columns: [
               { field: "BookingRefNo", title: "Booking RefNo", width: "120px" },
               { field: "CityName", title: "City Name", width: "120px" },
               { field: "BookingDateFrom", title: "BookingDate From", width: "120px" },
               { field: "FirstName", width: "120px" },
               { field: "CustomerEmail", width: "120px" },
               { field: "BookingType", width: "120px" }
            ],
            editable: false, // enable editing
            pageable: {
                numeric: true,
                refresh: true,
                pageSizes: [10, 25, 50, 100],
                buttonCount: 5
            },
            sortable: true,
            filterable: true,
            selectable: true,
            toolbar: kendo.template($("#template").html()),          
            dataSource: {
                serverPaging: true,
                serverFiltering: true,
                serverSorting: true,
                pageSize: 10,

                schema: {
                    data: "Data",
                    total: "Total"
                },
                type: "aspnetmvc-ajax",
                transport: {
                    read: {                    
                        url: ServiceBaseUrl, //specify the URL which should return the records.
                        contentType: "application/json",
                        type: "GET"
                        data: {
                            AdditionalParam: JSON.stringify(IRSService)
                        }
                    }
                }
            }
        };
     
        return bookingList;
    }]);