Angular custom filter doesnt work on server

Question

I am learning Angular so I created casual To do app. Custom filter works on localhost while on hosting it doesnt. I don't get any error messages and data doesn't show. If i remove taskPriority:this from li data shows which means on the server everything is ok but then, of course, filtering doesn't work. I am passing scope (this) to filter.

<li ng-repeat="task in tasks | taskPriority:this | filter:taskname as ukupno track by $index">
    <input class="edit_task" ng-blur="editTask(task.id, task.task)" ng-model="task.task" value="{{ task.task }}" type="text">
</li>

Filter checks if there is priority level (1,2,3) in array fSPriorites matching priority in task, if yes then it returns those tasks.

angular.module('TaskFilter', []).filter('taskPriority', function() {
    return function(task, scope) {
        var filtered = [];
        angular.forEach(task, function(task) {
            if($.inArray(task.priority, scope.fSPriorites) != -1)
                filtered.push(task);
        });
        return filtered;
    };
});

How do i debug this?

Answer 1

I don't understand why you are passing scope to fileter. This is not a good practice. Try below code.

HTML

<li ng-repeat="task in tasks | taskPriority:this.fSPriorites | filter:taskname as ukupno track by $index">
    <input class="edit_task" ng-blur="editTask(task.id, task.task)" ng-model="task.task" value="{{ task.task }}" type="text">
</li>

Filter

angular.module('TaskFilter', []).filter('taskPriority', function() {
    return function(task, fSPriorites) {
        var filtered = [];
        angular.forEach(task, function(task) {
            if($.inArray(task.priority, fSPriorites) != -1)
                filtered.push(task);
        });
        return filtered;
    };
});

Hope this could help you.Thanks,