in summary

Angular does not delete the array when applying filters in both scenarios:

whether it's done through the HTML code

{{ arr | filter : filterTerm}}

or within JavaScript:

newArray = $filter('filter')(arr, filterTerm);

a new array will be created.

To duplicate the markers array, use angular.copy method

angular.extend($scope,{
  filteredMarkers:angular.copy($scope.markers)
 });  

Create a custom filter to filter objects instead of arrays

app.filter('markerFilter',function(){
   return function(input,filterBy){
     var markers = [];
     if(input && filterBy && input[filterBy]){
       markers.push(input[filterBy]);
       return markers;
     }
     return input;
   }
 })

Visit the plunker, type m1, m2, m3 in the text-box and then click outside. https://plnkr.co/edit/GI4gn5

Applying an angular filter in your controller is a one-time action. To better suit your use-case, consider applying the filter directly within the view, like so:

{{ arr | filter : filterTerm}}

This way, your model remains untouched while displaying only the filtered items in the view. Explore this concept further in this fiddle which demonstrates using an input field for the filterTerm.

The issue lies in attempting to filter an object rather than an array.

Consider creating a custom filter like this:

app.filter('myObjectFilter', function() {
  return function(input, search) {
    var result = {};
    for (var key in input) {
      if (input.hasOwnProperty(key)) {
        if (input[key].data.toLowerCase().indexOf(search.toLowerCase()) > -1) {
          result[key] = input[key];
        }
      }
    }
    return result;
  }
});

Check it out here: https://plnkr.co/edit/Gi4gWHne57owB44MTsAB?p=preview

When you use the filter function, you are replacing your original array with the new filtered one.

arr = $filter('filter')(arr, filterTerm);

This is similar to the following code:

var y = 10;
y = y*2;

If you want to enhance your map with more dynamic markers, consider following the approach I took in a plunker version based on yours. By creating a factory to manage marker objects, returning them to the controller upon request, and then applying filters based on the filterTerm, which was missing from your original plunker.

app.factory('myMarkers', function() {

    var markers = {
        m1: {
            lat: 51.505,
            lng: -0.09,
            data: 'a'
        },
        m2: {
            lat: 51,
            lng: 0,
            data: 'ab'
        },
        m3: {
            lat: 51,
            lng: 0.1,
            data: 'abc'
        },
        m4: {
            lat: 51,
            lng: 0.14,
            data: 'abcd'
        }
    };

    function filterMarkersBy(term) {
        return _.filter(markers, function(marker) {
          return marker.data.indexOf(term) > -1;
        });
    }

    return {
        markers: markers,
        filterMarkersBy: filterMarkersBy
    }
});

In your controller, initialize the map by placing all markers on $scope (using

angular.extend($scope, { markers: myMarkers.markers });

...
angular.extend($scope, { markers: myMarkers.markers });

$scope.filterTerm;

$scope.$watch(function() { return $scope.filterTerm; }, function(newVal) {
    if (newVal) {
      console.log(newVal);
        $scope.markers = myMarkers.filterMarkersBy(newVal);
    }
});

Now, the filtering happens in real-time as you refine the search term, adding and removing markers dynamically. Keep in mind that I used lodash's _.filter() method for filtering in the factory, assuming you already have lodash as a dependency.

To achieve this task, consider creating two sets of data. Maintain the original dataset unchanged while assigning a filtered version to be used as markers on a map. Upon changing the filter term provided by the user, apply the filter to the original data and update the filtered data variable accordingly. Here is an example:

$scope.originalMarkers = {1,2,3,4}
$scope.filteredMarkers = $scope.originalMarkers // initial values for both are the same

watch (filterTerm){
   $scope.filteredMarkers = $filter on $scope.originalMarkers
}
$scope.filteredMarkers// assign this variable to the map.

Please excuse any coding errors in this pseudocode representation.

Here is a way to apply filtering in an angularjs view

<input type="text" ng-model="filterBy"><!-- Specify the filter option here -->
<div ng-repeat="row in rows| filter: {filterName : filterBy}">

Alternatively, you can also attempt this method in the controller:

$scope.filtered = $filter('filter')($scope.results, filterTerm)[0];

There may not be a straightforward 'angular' solution to this issue, but here's my approach to filtering a list using multiple filters. I suggest storing an array of filters and updating the results whenever any filter changes.

Please review the following code snippet to see if it meets your requirements:

angular.module('app', [])
  .controller('MyController', function($filter) {
    var vm = this;
    vm.markers = [{
      lat: 51.505,
      lng: -0.09,
      data: 'a'
    }, {
      lat: 51,
      lng: 0,
      data: 'ab'
    }, {
      lat: 51,
      lng: 0.1,
      data: 'abc'
    }, {
      lat: 51,
      lng: 0.14,
      data: 'abcd'
    }];

    //list of all terms to filter the data by
    vm.filterTerms = [];

    //initially set filteredMarkers equal to markers
    vm.filteredMarkers = vm.markers;

    vm.addFilterTerm = function(term) {
      vm.filterTerms.push(term);
      vm.filterMarkers();
    };

    /**
     * Applies each filter term to the source array and saves the filtered array
     */
    vm.filterMarkers = function() {
      var result = vm.markers; // start with original data
      for (var i in vm.filterTerms) {
        var filterTerm = vm.filterTerms[i]; // get current term
        result = $filter('filter')(result, filterTerm); // apply filter term
      }
      vm.filteredMarkers = result;
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="MyController as vm">
    <input type="text" ng-model="vm.currentFilterTerm" />
    <button ng-click="vm.addFilterTerm(vm.currentFilterTerm);">Add to filter</button>
    <h1>Filters</h1>
    <ul>
      <li ng-repeat="term in vm.filterTerms">{{term}}</li>
    </ul>
    <h1>Markers</h1>
    <ul>
      <li ng-repeat="marker in vm.filteredMarkers">{{marker}}</li>
    </ul>
  </div>
</div>

To dynamically filter and transform markers, use $watch('searchTerm') to detect changes in the search term. It's important to convert the markers Object into an array before applying the $filter.

  $scope.filteredMarkers = $scope.markers;          
  $scope.$watch("filterTerm", function(filterTerm) {
        $scope.arr = Object.keys($scope.markers).map(function(key) {
          return $scope.markers[key];
        });
        $scope.filteredMarkers = filterTerm ? $filter('filter')($scope.arr, {'data': filterTerm}) : $scope.markers;
    });

Subsequently, utilize the filteredMarkers in the directive:

<leaflet defaults="defaults" markers="filteredMarkers" height="480px" width="640px"></leaflet>

Check out the updated plunker: https://plnkr.co/edit/P5bNzHmZ2CRjImbMztyr?p=preview