Editable Pivot/Partially transposed grid for capturing - angularjs

Question

I have been tasked to develop a capturing web app for business. The aim of the app is to capture multiple (x24) KPI values for each day of the week.
Business wants to be able to capture these values in a pivot/transposed table.
Columns:
1. KPI ID
2. KPI Code
3. KPI Description
4. - 10. Days of the selected week.
5. for each KPI-Date combination there is a decimal value.
All KPI's are linked to a Country and Plant which is determined by the User Data of the logged in User Identity.
So far I have based the pivot on:
https://social.technet.microsoft.com/wiki/contents/articles/32770.dynamic-pivot-grid-using-mvc-angularjs-and-web-api.aspx
This helped A LOT!
(My current solution uses MVC 5, EF 5 Database First, Angularjs.)
At the moment my problem is with editing the values in the grid. Based on the above mentioned solution, the values are calculated using ng-bind-html sending parameters (KPI and Date column). I have set the contenteditable= true, which allows me to physically capture values....
BUT, it seems I can't actually do anything with the new/updated values since it is not bound to a model.
I hope all of this makes sense; My Question is, given the above mentioned scenario:
how can I use the changed value to be sent back to SQL via Stored Proc?
I have a feeling this approach is overkill for what I want to accomplish. Can anyone suggest a better approach?
My current thoughts are to maybe use
jquery to catch the change event on the cell and use the ID's of the row/column of the KPI and Date combinations.
So far I have been unsuccessful. The "change" event doesn't even give me an alert when triggered.
a pre-pivoted result from SQL using a stored procedure. BUT... the dates are dynamic and will change with every week selected. I am unable to specify a model for changing columns.
Any advise would be greatly appreciated.
Here is my angularjs controller function:
$scope.GetCaptureLinesPivot = function () {
var response = Dropdownfactory.GetCaptureLinesPivot($scope.UserID, $scope.CountryID, $scope.PlantID, $scope.WeekDate)
.then(function (success) {
$scope.lines = success.data;
angular.forEach($scope.lines, function (obj) {
obj["showEdit"] = false;
$scope.items = [];
$scope.ColDays = [];
$scope.values = [];
var uniqueUser = {},
uniqueKPICode = {},
uniqueKPIDesc = {},
uniqueDate = {},
uniqueKPIValue = {},
i;
//compile list of unique dates. should be 7
for (i = 0; i < $scope.lines.length; i += 1)
{
uniqueDate[$scope.lines[i].Date] = $scope.lines[i];
}
for (i in uniqueDate)
{
$scope.ColDays.push(uniqueDate[i]);
}
var UniqueItem = {}, i
for (i = 0; i < $scope.lines.length; i += 1) {
UniqueItem[$scope.lines[i].KPIID] = $scope.lines[i];
}
for (i in UniqueItem) {
var ItmDetails = {
UserName: UniqueItem[i].UserName,
KPIID: UniqueItem[i].KPIID,
KPICode: UniqueItem[i].Code,
KPIDesc: UniqueItem[i].Description,
KPIValue: UniqueItem[i].Value
};
$scope.items.push(ItmDetails);
}
Returned result from getting the data:
0:Object
Code:"XXXX"
Country:"Botswana"
CountryID:1
CurrentUserID:6
CurrentUserName:"DevPlant"
Date:"2017-03-20T00:00:00"
Description:"PD Km Travelled"
KPIID:38
Plant:"Francistown"
PlantID:186
UserID:6
UserName:"DevPlant"
Value:150
1:Object
Code:"XXXX"
Country:"Botswana"
CountryID:1
CurrentUserID:6
CurrentUserName:"DevPlant"
Date:"2017-03-21T00:00:00"
Description:"PD Km Travelled"
KPIID:38
Plant:"Francistown"
PlantID:186
UserID:6
UserName:"DevPlant"
Value:160
The function in the controller that return the Value to the cshtml:
$scope.showWeekItemDetails = function (colUser, colKPI, colDay) {
$scope.getLineVaue = 0;
$scope.DayCount = 0;
//alert(colUser + " " + colKPI + " " + colDay);
for (i = 0; i < $scope.lines.length; i++) {
if (colUser == $scope.lines[i].UserName) {
if (colKPI == $scope.lines[i].KPIID) {
if (colDay == $scope.lines[i].Date) {
$scope.getLineVaue = parseFloat($scope.lines[i].Value);
}
}
}
}
return $sce.trustAsHtml("<b>" + $scope.getLineVaue.toString() + "</b>");
}
My current cshtml:
<td width="20"></td>
<td width="1" align="left" valign="bottom" ng-show="false"><b>KPIID</b></td>
<td width="1" align="left" valign="bottom" ng-show="false"><b>CID</b></td>
<td width="1" align="left" valign="bottom" ng-show="false"><b>PID</b></td>
<td width="180" align="left" valign="bottom"><b>Description</b></td>
<td width="30" align="left"><b></b></td>
<td align="center" valign="bottom" data-ng-repeat="Cols in ColDays | orderBy: 'Date':false">
<div>
<table class="table table-condensed" font-size 50%; >
<tr>
<td align="center" width="80"><b>{{Cols.Date | date: 'EEE'}}</b></td>
</tr>
<tr>
<td align="center" width="80"><b>{{Cols.Date | date: 'dd MMM yy'}}</b></td>
</tr>
</table>
</div>
</td>
</tr>
<tbody data-ng-repeat="itm in items">
<tr>
<td width="20" class="lineNo" >{{$index+1}}</td>
<td width="1" class="kpiID" ng-show="false" align="left">{{itm.KPIID}}</td>
<td width="1" align="left" class="kpiDesc" ng-show="false">{{itm.CountryID}} </td>
<td width="1" align="left" class="kpiDesc" ng-show="false">{{itm.PlantID}}</td>
<td width="180" align="left">
<span class="kpiDesc">{{itm.KPIDesc}}</span>
</td>
<td width="30" align="left">
<span></span>
</td>
<td align="center" data-ng-repeat="Col in ColDays| orderBy:'Date':false" >
<table class="table table-bordered batch-edit">
<tr>
<td width="40" align="center">
<span ng-bind-html="showWeekItemDetails(itm.UserName,itm.KPIID,ColsNew.Date)" contenteditable="true"></span>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>