title: Angularjs with leaflet directives - To clear markers
body: <p>I have following setup working fine, however, I got some small problem..
  Tried many ways but I cannot get rid of markers before adding new markers..</p>
  
  <p>With following example, marker keep being added whenever you push from the controller..what is the best way to erase existing markers before adding any new one...?</p>
  
  <pre><code> var module = angular.module('Map', []);   
   module.directive('sap', function() {
  
      return {
          restrict: 'E',
          replace: true,
          template: '&lt;div&gt;&lt;/div&gt;',
          link: function(scope, element, attrs) {
              var map = L.map(attrs.id, {
                  center: [-35.123, 170.123],
                  zoom: 14
              });
              //create a CloudMade tile layer and add it to the map
              L.tileLayer('http://{s}.tile.cloudmade.com/57cbb6ca8cac418dbb1a402586df4528/997/256/{z}/{x}/{y}.png', {
                  maxZoom: 18
              }).addTo(map);
  
              //add markers dynamically
              var points = [];
              updatePoints(points);
  
         function updatePoints(pts) {
  
                  for (var p in pts) {
  
                      L.marker([pts[p].lat, pts[p].long]).addTo(map).bindPopup(pts[p].message);
                  }
  
              }
  
  
              scope.$watch(attrs.pointsource, function(value) {
                  updatePoints(value);
              });
  
          }
  
  
      };
  });
  </code></pre>
  
  <p>And inside the controller, the way to add new marker is</p>
  
  <pre><code>          $scope.pointsFromController.push({
                  lat: val.geoLat,
                  long: val.geoLong
              });
  </code></pre>
  
  <p>Code in the HTML is simple</p>
  
  <pre><code>&lt;sap id="map" pointsource="pointsFromController"&gt;&lt;/sap&gt;
  </code></pre>