Как определить угловой фильтр JS в виджете Custom в Bonita

Question

Я создал простой пользовательский виджет с Angular Js в дизайнере пользовательского интерфейса BONITA. Я определяю контроллер приложения внутри контроллера. Я не уверен насчет части и того, как она работает в BONITA. Я также добавил все ресурсы.

   app.filter('startFrom', function() {
   return function(input, start) {
   start = +start;
   return input.slice(start);}})

в

var startFrom= $filter('filter');
startFrom([],  function(input, start) {
if (input) {
start = +start;
return input.slice(start);}
return [];});

Тем не менее, кажется, не работает должным образом.

Я хотел бы знать, если я пропускаю какую-то часть. Любая помощь приветствуется.

Заранее спасибо. Код шаблона

 <input ng-model="q" id="search" class="form-control" placeholder="Filter text">
 <ul>
<li ng-repeat="item in data | filter:q |startFrom:currentPage*pageSize | 
limitTo:pageSize">    
    <div>{{item.firstname}}</div>
   </li></ul>
  <button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">Previous </button>  {{currentPage+1}}/{{numberOfPages()}}  <button ng-disabled="currentPage >= getData().length/pageSize - 1" ng- 
     click="currentPage=currentPage+1">  Next </button>`

контроллер

   function sds($scope, $filter) {
    var ctrl = this;

    $scope.startFrom=0;
    $scope.currentPage = 0;
    $scope.pageSize = 10;
    $scope.data =  [
  {
   "firstname": "Studio", 
   "userName": "studio"  
   },
  {
   "firstname": "Giovanna", 
   "userName": "giovanna.almeida"  
  },
  {
   "firstname": "Daniela",
   "userName": "daniela.angelo"
  },
  {
   "firstname": "Walter",
    "userName": "walter.bates"
  },
 {
   "firstname": "Giovanna", 
   "userName": "giovanna.almeida"  
  },
  {
   "firstname": "Daniela",
   "userName": "daniela.angelo"
 },
 {
   "firstname": "user1",
    "userName": "user1.name"
 },
 {
  "firstname": "user2",
  "userName": "user1.name"
 },
 {
  "firstname": "user3",
   "userName": "user1.name"
 },
 {
   "firstname": "user4",
    "userName": "user1.name"
 }

 ];

    $scope.q = '';

    $scope.getData = function () {
  return $filter('filter')($scope.data, $scope.q)
}

$scope.numberOfPages=function(){
    return Math.ceil($scope.getData().length/$scope.pageSize);
}

for (var i=0; i<65; i++) {
   // $scope.data.push("Item "+i);
}

$scope.$watch('q', function(newValue,oldValue){                      
    if(oldValue!=newValue){
    $scope.currentPage = 0;
  }
}

  var startFrom= $filter('filter');

  startFrom([],  function(input, start) {
        if (input) {
    start = +start;
   return input.slice(start);
   }
   return [];
   }
 ); 


 /*
app.filter('startFrom', function() {
return function(input, start) {
start = +start;
return input.slice(start);
}})
*/

}