Unit test an Angular-Kendo Grid Datasource - all code paths

I'm writing custom Angular directives for a new application and unit testing them using Jasmine. However, I can't for the life of me figure out how to get full code coverage (or even 80%) on the Kendo Grid Datasource.

I have a custom Angular Kendo grid directive that looks like this:

function customKendoGrid() {
  return {
    scope: {
        hiPageSize: "="
    },
    template: "<div kendo-grid k-options='gridOptions' k-ng-delay='gridOptions'></div>",
    controller: "hiKendoGridCtrl"
  };
}

I did this so I could put a custom object on the scope for the grid directive. My controller looks like this:

function hiKendoGridCtrl($scope, $http, hiKendoGridSvc) {
  var initialData = {
    page: 1,
    pageSize: 2,
    type: "initial"
  };
  if(angular.isUndefined($scope.initialLoad)){
    $scope.initialLoad = true;
  }
  var firstPageData = hiKendoGridSvc.getFirstPage(initialData);
  firstPageData.then(function (result) {
    var columnSet = result.ColumnSet;
    var dataModel = result.Model;
    var GridModel = kendo.data.Model.define(dataModel);
    var firstPage = result.Data;
    var totalResults = result.Total;
    $scope.gridOptions = {
        dataSource: {
            schema: {
                data: "Data",
                total: function () { return totalResults; }, // NOT COVERED
                model: GridModel
            },
            transport: {
                read: function (options) {
                    if ($scope.initialLoad) {// NOT COVERED
                        $scope.initialLoad = false;// NOT COVERED
                        options.success({ Data: firstPage });// NOT COVERED
                    } else {
                        var requestData = {// NOT COVERED
                            page: options.data.page,
                            pageSize: options.data.pageSize,
                            type: "page"
                        };
                        $http({ method: 'POST', url: 'Home/DataSourceResult', data: requestData }).success(
                            function (data) {
                                options.success(data);// NOT COVERED
                            }).error(
                            function (data, status, headers, config) {
                                console.log(data);// NOT COVERED
                                console.log(status);// NOT COVERED
                                console.log(headers);// NOT COVERED
                                console.log(config);// NOT COVERED
                            });
                    }
                }
            },
            serverPaging: true,
            pageSize: $scope.hiPageSize
        },
        scrollable: true,
        pageable: {
            input: true,
            numeric: false,
            refresh: true
        },
        editable: true,
        columns: columnSet,
        sortable: true,
        groupable: true
    };

  });
}

Explanation of above

An initial call is made to the server to get all grid configuration (schema, columns, first page of data, and total). All subsequent calls go to the same URL with different post parameters just retreiving a page of data from the server.

My problem is that I can't seem to find ways to traverse the code paths shown above as "NOT COVERED" in a comment.

I invoke both the grid and the controller in separate unit tests, but can't seem to get a Kendo Grid to compile and invoke the different paths above.

My current two tests for the controller and the directives are:

Controller

beforeEach(inject(function($http){
    ctrl = $controller("hiKendoGridCtrl", {
         $scope: $scope,
         $http: $http,
         hiKendoGridSvc: hiKendoGridSvcMOCK
    });
    $scope.$digest();
}));

And with that I can assert all kinds of things for the controller, including that the correct '$scope.gridOptions' are defined.

Directive Test // I set up the scope as new rootScope and set compile = $compile in the beforeEach of this test. it("should output the correct HTML", function () { catchPOST.respond({ data : responseDataMOCK }); element = ''; element = compile(element)(scope); scope.$digest(); expect(element[0].innerHTML).toContain(''); }

But this does not catch the above descriptions in the controller above.

I have also tried something that I consider quirky, but something similar to:

// Execute the above directive test compiling my custom directive to a kendo directive
it("Should have the correct scope", function() {
                var gridElement = '<div kendo-grid k-options="gridOptions"></div>';
                gridElement = compile(gridElement)($scope);
                console.log($scope);
                console.log(gridElement);
            });

So I thought perhaps I could get the GridOptions on scope and then compile the kendo directive manually, but this doesn't resuly in gridElement having any innerHTML at all.

So... the question is:

How can I add new tests/change existing tests to get full code coverage?

How could I/Should I change my code to make it more etstable? I'm hesitant to do this since it took A LOT of effort to get the grid working correctly with a dynamic configuration.

Thanks!