TypeError: Cannot read property '$filter' of undefined

I am showing the json object on the UI when user click on a link, below is the exception it is showing

TypeError: Cannot read property '$filter' of undefined

Demo: http://plnkr.co/edit/5NOBQ3rzE3EFwTnuLbXG?p=preview

sample js code:

app.controller('BaseCtrl', ['$scope','$http','$filter', function($scope,$http,$filter) {

$scope.myList = [{"sId":100,"spread":"21x","owner":"Michael","labels":"deffered incomplete"},
{"sId":101,"spread":"34","owner":"Steve","labels":"complete"},
{"sId":102,"spread":"90s","owner":"John","labels":"tested"},
{"sId":103,"spread":"332","owner":"Dex","labels":"complete deffered"}  
];

//$scope.myListObj;
$scope.showList = function(myListObj){
  console.log("myListObj " + JSON.stringify(myListObj));
  //  $scope.defferedList = $scope.myListObj.filter(function( obj ) {
    $scope.defferedList =  JSON.stringify($scope.myListObj).filter(function( obj ) {
      console.log(obj.labels.includes('deffered'));
      return obj.labels.includes('deffered');
}); 
console.log("defferedList :: " +  $scope.defferedList);
}
}]);

I have included '$http','$filter' in the controller.Any inputs?

Solution

I made a quick change, as I think this is what you actually want.

Basically, you aren't using $filter, and you're trying to filter on a type that does not have that method within its prototype. If you don't stringify, it will work as intended.

var app = angular.module('myApp', []);
app.controller('BaseCtrl', ['$scope','$http', function($scope,$http) {
  
  $scope.myList = [{"sId":100,"spread":"21x","owner":"Michael","labels":"deffered incomplete"},
{"sId":101,"spread":"34","owner":"Steve","labels":"complete"},
{"sId":102,"spread":"90s","owner":"John","labels":"tested"},
{"sId":103,"spread":"332","owner":"Dex","labels":"complete deffered"}  
];

//$scope.myListObj;
$scope.showList = function(myListObj){
  console.log("myListObj " + JSON.stringify(myListObj));
  //  $scope.defferedList = $scope.myListObj.filter(function( obj ) {
    $scope.defferedList =  myListObj.filter(function( obj ) {
   console.log(obj.labels && obj.labels.includes('deffered'));
      return obj.labels && obj.labels.includes('deffered');
}); 
console.log("defferedList :: ", $scope.defferedList);
}
}]);

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
 
  <script src="script.js"></script>
  <style>
    .my-col-50{float:left;}
  </style>
</head>

<body ng-app="myApp" ng-controller="BaseCtrl">
  <div class="container">
   
    <a href="javascript:void(0)" ng-click="showList(myList)"> 
    Click here</a>
 </div>
</body>
</html>