Grid selection with Angular $scope.$apply()

[Mark]

I have a simple grid with the click event bound. When the user clicks a row in the grid, it should be highlighted and a detail table included on the page populated based on data from the selected row.

Within the click event of the grid, I populate an array from the selected row's dataitem. The table is populated via ng-repeat acting on the array. In order to force data binding once the array has been prepared, I'm calling $scope.$apply() - but as soon as that happens, the row selection highlight disappears. I want the selected row to remain highlighted.

    $("#gridItemResults").on("click", "tbody", function (e) {
        var grid = $("#gridItemResults").data("kendoGrid");
        var dataItem = grid.dataItem(grid.select());
        var dataJson = dataItem.toJSON();
        $scope.selectedItem.length = 0;

        // populate the selectedItem arrary from the selected row:
        for (var key in dataJson) {
            if (dataJson.hasOwnProperty(key)) {
                $scope.selectedItem.push({ 'key': convertCamelCase(key), 'value': dataJson[key] });
            }
        }

        $scope.$apply(); // update binding

    });

[Mark]

Never mind, I was refreshing the grid whenever the page layout changed (duh!).