在AngularJS中单击另一个ui网格的行时如何显示一个ui网格？

Question

我需要在单击另一个ui网格的行时显示一个ui网格。 下面是我用来实现此功能的控制器和html代码。

但是它不起作用。我在这里想念什么？

控制器

if (isfirstPageLoad != 1) {
    $http({
            method: 'Post',
            url: 'http://localhost:1111/api/Values/PostEmployeeData',
            dataType: 'json',
            data: $.param(empDetails),
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        }).success(function (data) {
           $scope.employerList = data;
            isfirstPageLoad = 1;                           

        }).error(function (error) {
            alert('There is an error');
        });    
        $scope.gridOptions = {
            data: 'employerList',
            enableSorting: true,                            
            columnDefs: [
                { field: 'NAME', displayName: 'Name' },
                { field: 'VALUE', displayName: 'Type' }
            ]
        }
    }

    $scope.gridOptions.onRegisterApi = function (gridApi) {    
            $scope.gridApi = gridApi;                            
            gridApi.selection.on.rowSelectionChanged($scope, callbackFunction);                            gridApi.selection.on.rowSelectionChangedBatch($scope, callbackFunction);    
            }                

     function callbackFunction(row) {                          
         angular.element(document.querySelector('#empDiv')).css('display', 'block');                     

         $scope.myvalue = row.entity.NAME;
         $scope.title = row.entity.NAME;
         var empKeyPlanKey = {
             EmployerKey: row.entity.Employer_Key,
             PlanKey: row.entity.Plan_key,
         }; 
         $scope.PlanContactList = [];    
         $http({
             method: 'Post',
             url: 'http://localhost:1111/api/Values/postPlanContacts',
             dataType: 'json',
             data: $.param(empKeyPlanKey),
             headers: {
                 'Content-Type': 'application/x-www-form-urlencoded'
             }
         }).success(function (data) {                             
             $scope.PlanContactList = data[0];                             
         }).error(function (error) {
             alert('There is an error');
         });    
         $scope.gridOptions1 = {
             data:'PlanContactList',                             
             columnDefs: [
                 { field: 'FirstName', displayName: 'First Name' },
                 { field: 'LastName', displayName: 'Last Name' },
                 { field: 'IsContactTypeViewable', displayName: 'Viewable' }
             ]
         }                     
    }

.html

<table id="grid2" ui-grid="gridOptions" ui-grid-pagination ui-grid-move-columns ui-grid-selection ui-grid-auto-resize  class="myGrid style"></table>                    

<div id="grid1" ui-grid="gridOptions1" ui-grid-pagination ui-grid-move-columns ui-grid-selection ui-grid-auto-resize  class="myGrid style"></div>