How to implement new controller in Service Portal

[jpavanaryan]

I would like implement table pagination in Service Portal web page. I am trying to use   ngTable Examples. How do we implement below code in Service Portal. I tried to replace myApp with 'sn.$sp' and added demoController in HTML code,   it didn't work. I was also looking at angular providers to reproduce this code, but I am having hard time with syntax. Any suggestions?

(function() {
   "use strict";
   var app = angular.module("myApp", ["ngTable", "ngTableDemos"]);
   app.controller("demoController", demoController);
   demoController.$inject = ["NgTableParams", "ngTableSimpleList"];
   function demoController(NgTableParams, simpleList) {
       this.tableParams = new NgTableParams({
           // initial sort order
           sorting: { name: "asc" } 
       }, {
           dataset: simpleList
       });
   }
(function() {
   "use strict";
   angular.module("myApp").run(configureDefaults);
   configureDefaults.$inject = ["ngTableDefaults"];
   function configureDefaults(ngTableDefaults) {
       ngTableDefaults.params.count = 5;
       ngTableDefaults.settings.counts = [];
   }
})();

HTML

<div   class="container-fluid">
   <div id="h2_title">
           Welcome 
       </div> <br/>
   <div class="panel panel-info">
       <div class="panel-heading"> Open Incidents</div>
       <div class="panel-body">
       <div class="col-md-12" ng-controller="demoController as demo" pagenate-table-records>
           <table   ng-table="demo.tableParams" class="table display" id="open_incidents">
               <tr class="row header blue">
                   <th>#</th>
                   <th>Incident Id</th>
                   <th>Incident Type</th>
                   <th>Status</th>
                   <th>Indicator Count</th>
                   <th>Created Date</th>
                   <th>Last Updated</th>
               </tr>
               <tr ng-repeat="row in c.data.tableData track by $index" class="row" >
                   <td data-title="'incidentId'" class="cell">{{$index}}</td>
                   <td data-title="'incidentId'"><a href="/haloportal/?id=incident_summary&sys_id={{row.sysId}}" style="color:#0c4a6f">{{row.incidentId}}</a></td>
                   <td data-title="'incidentType'" sortable="'incidentType'" class="cell">{{row.incidentType}}</td>
                   <td data-title="'incidentStatus'" sortable="'incidentStatus'" class="cell">{{row.incidentStatus}}</td>
                   <td data-title="'indicatorCount'" sortable="'indicatorCount'" class="cell">{{row.indicatorCount}}</td>
                   <td data-title="'createdDate'" sortable="'createdDate'" class="cell">{{row.createdDate}}</td>
                   <td data-title="'lastUpdated'" sortable="'lastUpdated'" class="cell">{{row.lastUpdated}}</td>
               </tr> 
               <!--
                 <tr ng-repeat="row in c.data.tableData track by $index" class="row">
                   <td data-title="'incidentId'" class="cell"></td>
                   <td data-title="'incidentId'" sortable="'incidentId'" class="cell"></td>
                   <td data-title="'incidentType'" sortable="'incidentType'" class="cell"></td>
                   <td data-title="'incidentStatus'" sortable="'incidentStatus'" class="cell"></td>
                   <td data-title="'indicatorCount'" sortable="'indicatorCount'" class="cell"></td>
                   <td data-title="'createdDate'" sortable="'createdDate'" class="cell"></td>
                   <td data-title="'lastUpdated'" sortable="'lastUpdated'" class="cell"></td>
               </tr>   -->
           </table>
   </div>
       </div>
   </div>
</div>
   <script>
</script>

Angular Provider (developed based on above script & not working)

function() 
{
   return {
   link: function($scope)
   {
   },
   restrict: 'A', // use 'A' for attribute or 'E' for element 
   replace: 'true',
   controller: demoController("$scope","NgTableParams", "ngTableSimpleMediumList",function ($scope,NgTableParams, simpleList) 
   {
   NgTableParams="NgTableParams";
   simpleList="ngTableSimpleMediumList";
   this.tableParams = new NgTableParams({
     // initial sort order
     sorting: { name: "incidentId" } 
   }, {
     dataset: simpleList
   });
     })
   };
   function demoController(NgTableParams, simpleList) 
   {
       this.tableParams = new NgTableParams({
           // initial sort order
           sorting: { name: "incidentId" } 
       }, {
           dataset: simpleList
       });
   }
configureDefaults.$inject = ["ngTableDefaults"];
   function configureDefaults(ngTableDefaults)
 {
       ngTableDefaults.params.count = 5;
       ngTableDefaults.settings.counts = [];
   }
}

[jpavanaryan · Accepted solution]

I had a long discussion with other developers in Github regarding this. Final answer can be found here

How to create new controller in Client script · Issue #205 · service-portal/documentation · GitHu...

[Andrew Pishchul]

Can you share the solution? they removed that part of documentation/issues from github.

Just trying to utilize ngTable on Service Portal as well.