Filtering geojson change dynamically in table and on map

[igorh...@gmail.com]

Right now i try to figure out how to make geojson filter with ng-model search

I know that geojson has attribute filter, so my question is how should it be done ? I assume there is no way to do simple geojson | filter:search, so it should be done on the side of angular?

I found good solution but it works only with mapbox, it is possible to do something like below with leaflet-angular-directive?

<mapbox map-id="examples.map-i86l3621" lat="11.403569" lng="8.329453" zoom="3">

    <div ng-repeat="hf in hf_directory |filter:search">
 <marker lat="{{hf.geometry.coordinates[1]}}" lng="{{hf.geometry.coordinates[0]}}" color="#39cccc">
    </marker>
    </div>

</mapbox>

I use simple filtering

<input ng-model="search.properties.Primary_Name" placeholder="Primary Name" >

<tr ng-repeat="hf in hf_directory| filter:search">

My Template:

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


</leaflet>

I use leaflet-angular-directive and it looks like this:

   

var AppMapDirectory = angular.module('DirectoryAppMap', ['ngResource', 'leaflet-directive']);

AppMapDirectory.factory("Directory", function($resource) {
   return $resource("json/result.json", {}, {
       get: {
           method: "GET",
           cache: true
       }
   });
});



AppMapDirectory.controller("DirectoryMapList", ["$scope", "Directory", "$filter", function($scope, Directory, $filter) {




    Directory.get(function(data) {

       $scope.hf_directory = data.features;


        function onEachFeature(feature, layer) {
                layer.bindPopup("<b>Name:</b> " + feature.properties.Name +
                    "<br><b>Category:" + feature.properties.Category +
                    "<br>Primary Name:" + feature.properties.Primary_Name + "");
            }


         angular.extend($scope, {
           geojson: {

               onEachFeature: onEachFeature,
               data: $scope.hf_directory
           }

       });

       });


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

[igorh...@gmail.com]

Actually i wrote simple filter function for geojson, but maybe somebody could show me direction how to make that this function will work together with input ng-model search?
The  way as i did it is not dynamic

function filter(feature) {
    return feature.properties.PrimaryName == "somename";
}

         angular.extend($scope, {
           geojson: {
              onEachFeature: onEachFeature,
               data: $scope.hf_directory,
               filter:filter
           }

       });