UI Grid not getting populated in Angular JS

Question

As I am new to Angular , I must have made some silly mistake. Please do explain the reason for the error.

I have a modal popup where we can search for a case by giving the input search criteria and hitting on a QuickCaseSearch button.

<div ng-controller="CaseSearchCtrl">
    <div ng-show="case.togglePleaseWait">
        <div class="refresh" style="padding:15px;width:100%;height:100px;">
            <h4>Please wait....</h4>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading text-center">
            Case Search
        </div>

        <table class="table table-striped">
            <tr>
                <td>
                    <select name="selSearchType" id="selSearchType" class="form-control" ng-model="case.searchTerm"
                            ng-init="case.searchTerm == 'caseNo'" ng-options="o as o for o in case.searchTerms"></select>
                </td>
                <td><input type="text" class="form-control" placeholder="enter search term" ng-model="case.input" /></td>
                <td><button class="btn btn-default" type="button" ng-click="case.quickSearch()">Quick Search</button></td>
            </tr>
        </table>   
    </div>
</div>

And upon searching , all the results should be populated in an UI Grid in another modal popup.

In controller I wait to set/store the results first in a service , and then call the getQuickCasePopup functin that opens a modal dialog to show the results.

  CaseServices.getCaseAdvSearchResults(postParams).then(function (result) {
        if (result.length > 0) {
            $scope.case.togglePleaseWait = false;
            console.log(result);
            console.log("Setting the result in CaseDataServices");
            CaseDataServices.setSearchResultsData(result);
            getQuickCasePopup($scope, $uibModal,$rootScope);

        }

I am getting the result till now . And the modal pop up is also opening that shows a UI grid to display the results.

function getQuickCasePopup($scope, $uibModal, $rootScope) {
    var templateUrl = BasePath + 'App/Transaction/Views/common/QuickCaseSearch.tpl.html';
    var controller = 'QuickCaseSearchCtrl';
    OpenModal($scope, $uibModal, null, templateUrl, controller, null, null, '', $rootScope);
}

function OpenModal($scope, $uibModal, $stateParams, templ, ctrl, grid, row, size, $rootScope) {

    var CssClass = '';
    if (size === 'lg') {
        CssClass = 'app-modal-window';
    }

    var ModalInstance = ModalInstance || $uibModal.open({
        animation: $scope.animationsEnabled,
        templateUrl: templ,
        controller: ctrl,  // Logic in instantiated controller 
        windowClass: CssClass

    });
}

In the controller of this modal I am getting the results of search which I stored in the service back and setting the grid options and displaying the results.

TransactionModule.controller("QuickCaseSearchCtrl", ['$scope', '$uibModal', '$uibModalInstance', 'uiGridConstants', 'TransactionDataServices', 'CaseDataServices', '$rootScope', function ($scope, $uibModal, $uibModalInstance,uiGridConstants, TransactionDataServices, CaseDataServices, $rootScope) {
        var columnDefs = CaseDataServices.getSearchResultsColumnDef();
        console.log("Column Defs " + columnDefs);
        var uiScrollNever = uiGridConstants.scrollbars.NEVER;
        var uiScrollAlways = uiGridConstants.scrollbars.ALWAYS;
        //passing rootscope for toggling filters
        $scope.case = {
            gridOptions: CaseDataServices.getSearchGridOptions(uiGridConstants, columnDefs),
            results : []
        }

         $scope.case.gridOptions.onRegisterApi = function (grid) {
             $scope.case.gridApi = grid;
         }

         console.log("Getting the result from CaseDataServices");
         $scope.case.results = CaseDataServices.getSearchResultsData();
         console.log("The quick search results returned---" );
         console.log($scope.case.results);
         console.log("Setting results into the grid");
         $scope.case.gridOptions = getCaseGridLayout($scope.case.gridOptions, uiGridConstants, $scope.case.results);

         $scope.case.backToSearchForm = function () {
             $scope.case.toggleAdvSearch = true;
             $scope.case.toggleAdvSearchResults = false;
         }


         $scope.case.pageChanged = function (page) {
             $scope.case.gridApi.pagination.seek(page);
         };

         $scope.case.back = function () {
             $uibModalInstance.dismiss('cancel');
         };
}]);

And here is the modal pop up code that's to be displayed ....

<div class="modal-header">
    <h3 class="modal-title">Quick Case Search Results</h3>
</div>
<br />
<br />

<div class="row">
    <div style="margin-left:40px;margin-right:40px;">
        <div ui-grid="case.gridOptions" ui-grid-selection class="CaseAssociation" ui-grid-pagination ui-grid-auto-resize>
            <div class="watermark" ng-show="!case.gridOptions.data.length">No data available</div>
        </div>

        <div class="grid-pager">
            <uib-pagination boundary-links="true" total-items="case.totalItems" items-per-page="4" ng-change="case.pageChanged(currentPage)" ng-show="(case.totalItems>4) == true"
                            ng-model="case.currentPage" class="pagination" direction-links="false" id=""
                            first-text="&laquo;" last-text="&raquo;"></uib-pagination>
        </div>
    </div>
</div>
<br />

<div class="modal-footer">
    <button class="btn btn-default pull-left" ng-click="case.back()"> Back</button>
</div>

Here is what I am getting at the browser console. The result returned but did not reflect ...