Record is not getting displayed in the service portal

[vidhya_mouli]

I have a custom widget which is displaying records based on the date range. The widget returns the records (I can see the objects in the console). However it is not getting displayed in the portal. Any help appreciated.

HTML:

<div ng-controller="OutageWidgetController" ng-init="init()">

  <div class="list-group-item row header-container justify-content-right">

   
    <!-- SEARCH CONDITION -->
    <div class="col-md-4 col-xs-12 padding-left-large fit-content">
      <div class="input-group" style="width:100%">
        <input ng-model="searchText" ng-keypress="$event.keyCode == 13 && searchRecords()" class="form-control" style="width:100%" placeholder="Search...">
        <span class="input-group-btn">
          <button class="btn btn-default align-icon" type="button" ng-click="searchRecords()"> <i class="fa fa-search"></i> </button>
        </span>
      </div>
    </div>


      <!-- Date range picker -->
       <div id="monthSelector">
    <span id="prevMonth" ng-click="decrementMonth()">&#9666;</span>
    <span id="selectedMonth">{{formatMonthRange()}}</span>
    <span id="nextMonth" ng-click="incrementMonth()">&#9656;</span>
  </div>

    <div ng-repeat="record in limitedRecords">
    <div class="record-container" style="padding: 15px; border: 1px solid #ccc; margin-bottom: 10px;">
      <div>
        <div class="published-container"><strong>{{record.title}}</strong></div>
        <div class="description-container">{{record.content}}</div>
      </div>
    </div>
  </div>
</div>

Client Script:

function ($scope, $http) {
    // Initialize currentMonthIndex and currentYear
    $scope.currentMonthIndex = 0;
    $scope.currentYear = 0;
		$scope.batchSize = 99;

    // Initialize function to fetch records
    $scope.init = function () {
        // Initialize currentMonthIndex to 3 months before the current month
        var currentDate = new Date();
        var currentMonth = currentDate.getMonth();
        var currentYear = currentDate.getFullYear();
        $scope.currentMonthIndex = (currentMonth - 2 + 12) % 12;
        $scope.currentYear = currentYear;

        // Fetch records
			  $scope.fetchRecords();
    };

    // Fetch records function
    $scope.fetchRecords = function () {
        var begin = $scope.startDate.toISOString().slice(0, 10); // Format the start date
        var end = new Date($scope.endDate.getFullYear(), $scope.endDate.getMonth(), $scope.endDate.getDate(), 23, 59, 59).toISOString().slice(0, 10);
			console.log("\n\n\n" + begin);
			console.log(end);

        // Add date range to query
        var queryParams = {
            sysparm_query: "u_dateBETWEENjavascript:gs.dateGenerate('" + begin + "','00:00:00')@javascript:gs.dateGenerate('" + end + "','23:59:59')"
        };
			

        // Make an AJAX request to the server to fetch records
        $http.get('/api/now/table/u_demo_sv_newsletters', { params: queryParams })
            .then(function (response) {
                $scope.totalRecords = response.data.result.length;
                $scope.showLoadMoreButton = $scope.totalRecords > $scope.batchSize;

                // Display only the first batch of records initially
                $scope.limitedRecords = response.data.result.slice(0, $scope.batchSize);
            });
			
			console.log("\n\n\nLIMITED:" + $scope.limitedRecords);
    };

    var currentDate = new Date();
    $scope.startDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1); // First day of current month
    $scope.endDate = new Date($scope.startDate.getFullYear(), $scope.startDate.getMonth() + 2, 0); // Last day of the range (+2 months)

    $scope.formatMonthRange = function () {
        var monthNames = ["January", "February", "March", "April", "May", "June",
            "July", "August", "September", "October", "November", "December"];
        return monthNames[$scope.startDate.getMonth()] + ' ' + $scope.startDate.getFullYear() + ' - ' +
            monthNames[$scope.endDate.getMonth()] + ' ' + $scope.endDate.getFullYear();
    };

    $scope.decrementMonth = function () {
        $scope.startDate.setMonth($scope.startDate.getMonth() - 1);
        $scope.endDate.setMonth($scope.endDate.getMonth() - 1);
        $scope.fetchRecords(); // Fetch records based on the new range
    };

    // Method to increment the month range
    $scope.incrementMonth = function () {
        $scope.startDate.setMonth($scope.startDate.getMonth() + 1);
        $scope.endDate.setMonth($scope.endDate.getMonth() + 1);
        $scope.fetchRecords(); // Fetch records based on the new range
    };
}

Server Script:

(function () {

  data.fetchRecords = function () {
		
    var gr = new GlideRecord('u_demo_sv_newsletters');
    gr.addQuery('active', true);
		console.log("RUNNING!!!")
    gr.query();

    var records = [];
    while (gr.next()) {
      var record = {
        title: gr.u_title,
        content: gr.u_newsletter,
      };
      records.push(record);
    }

    return records;
  };
})();