Service Portal Custom table to show records with search functionality ServiceNow

HTML:

<div>
<!-- your widget template -->
  <pre>Sort by= {{orderField}}</pre>
  <div><label>Search</label><input type="text" ng-model="searchText"></div>
  <table>
    <tr><th><button ng-click="changesort('number')">Number</button></th>
    <th><button ng-click="changesort('short_description')">Short Description</button></th>
      <th><button ng-click="changesort('sys_updated_on')">Date</button></th>
    </tr>
    <tr ng-repeat="incident in data.incidents | orderBy:orderField | filter:searchText">
      <td>
{{incident.number}}
      </td>
       <td>
{{incident.short_description}}
      </td>
       <td>
{{incident.sys_updated_on}}
      </td>
    </tr>
  </table>
</div>

Server Script

(function() {
  /* populate the 'data' object */
  /* e.g., data.table = $sp.getValue('table'); */
data.incidents=[];
var gr=new GlideRecord("incident");
 gr.addActiveQuery();
 gr.setLimit(10);
 gr.orderByDesc("sys_updated_on");
 gr.query()
 while(gr.next())
  {
   var incident={};
   incident.number=gr.getDisplayValue('number');
   incident.short_description=gr.getDisplayValue('short_description');
   incident.sys_id=gr.getUniqueValue();
   incident.sys_updated_on=gr.getValue('sys_updated_on');
   data.incidents.push(incident);
  }
})();

Client Controller

function($scope, spUtil) {
  /* widget controller */
  var c = this;
 $scope.orderField="number";
 $scope.changesort=function(field){
     $scope.orderField=field;
   spUtil.recordWatch($scope,"incident","", function(name,data){
   spUtil.update($scope);
  });
 };
}