Header Dropdown in ui-grid AngularJS - angularjs

Question

I am trying to get dropdown values in header for one of the field in ui-grid. For the same field I have the dropdown for every row working fine. Based on the header dropdown selection every dropdown values in rows should be selected. Here is my plunker link. Can someone help please?
Here's a link!
var jsonDef = { name: 'Status', field: 'Status', width: 150,
editType: 'dropdown',
editableCellTemplate: 'ui-grid/dropdownEditor',
headerCellTemplate: '<div class="ui-grid-cell-contents header-tcsi"><select
ng-required = "true" ng-options="options.id as options.type for tcsiOption
in grid.appScope.MainCtrl" ng-model="grid.appScope.selectedTCSI"></select>
</div>',
editDropdownIdLabel: 'id',
editDropdownValueLabel: 'type',
filter: {
type: uiGridConstants.filter.SELECT,
condition: uiGridConstants.filter.EXACT }
};
var options = [{
id: 1,
type: 'Closed'
}, {
id: 2,
type: 'Pending'
}, {
id: 3,
type: 'Open'
}];

Answer 1

You were using the ng-options incorrectly. If you want to access something from the appScope you have to the attach it to the controller $scope. Then you can change your template where you use the options like so:
headerCellTemplate: '<div class="ui-grid-cell-contents header-Status"><select ng-required = "true" ng-options="options.id as options.type for options in grid.appScope.dropdownoptions" ng-change= "grid.appScope.selectionChanged()"ng-model="grid.appScope.selectedStatus"></select> </div>'
Pay attention to ng-options:
ng-options="options.id as options.type for options in grid.appScope.dropdownoptions"
The way you've written your code, you need to listen to when the dropdown changes and then update the values in the grid. Check the
Updated Plnkr for the working example.