Using filter with geojson, right direction?

Question

I want to attach filter to map displayed by angular-leaflet-directive so geojson will be filtered in table and in map i tried something like this, but is not working properly, where i mad mistake?

My App Controller

AppMapDirectory.controller("DirectoryMapList", function($scope, Directory, $filter,     filterFilter) {
Directory.get(function(data) {
   $scope.hf_directory = data.features;
   angular.extend($scope, {
       geojson: {
           data: filterFilter($scope.hf_directory, $scope.search),
           filter: $scope.filter


       }
   });
   });


   angular.extend($scope, {
     defaults: {
         tileLayer: "https://dnv9my2eseobd.cloudfront.net/v3/foursquare.map-ikj05elx/{z}/{x}/{y}.png",
        maxZoom: 14,
        minZoom: 3
     },
     center: {
        lat: 8.1238,
        lng: 11.8777,
        zoom: 2
    }
    });

My template

 <leaflet id="map" center="center" defaults="defaults" geojson="geojson"></leaflet>

i was thinking about adding geojson="geojson|filter:search" but is not solving the problem?

Maybe there is other way, it is possible to add ng-repeat somehow to leaflet? so then i assume filter:search would work?

Answer 1

You're injecting $filter and filterFilter into your controller, but you're not actually assigning one of them to your scope. Meanwhile you are assigning $scope.filter to the filter property of your geojson declaration. That won't work because $scope.filter isn't declared. Before extending the scope with your geojson declaration you've got to assign the filter to the scope: $scope.filter = filterFilter or $scope.filter = $filter, depending on which on you need. That's unclear to me since i can't see what $filter and filterFilter contain.

// assign filterFilter to the $scope
$scope.filter = filterFilter;
// or assign $filter to the $scope
$scope.filter = $filter;

angular.extend($scope, {
    geojson: {
        data: filterFilter($scope.hf_directory, $scope.search),
        filter: $scope.filter
    }
});