title: angular-leaflet-directive. How to bind markers?
body: <p>I'm trying to set markers in angular-leaflet-directive. I meet some problems when I try to bind markers.</p>
  
  <p>html:</p>
  
  <pre><code> &lt;leaflet defaults="defaults" markers="markers"  center="center" layers="layers" defaults="defaults" height="800px" width="100%"&gt;&lt;/leaflet&gt;
  </code></pre>
  
  <p>and controller:</p>
  
  <pre><code>angular.module('MapCtrl', ["leaflet-directive"])
  .controller('MapController', ['$scope','$http', function($scope, $http) {      
  
  $scope.tagline = 'Maps content';
  
  angular.extend($scope,  {
  
         defaults: {
          tileLayer: "http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png",
          maxZoom: 14,
          path: {
              weight: 10,
              color: '#800000',
              opacity: 1
          }
      },
      center: {
          lat: 52.218374, 
          lng: 19.594210,
          zoom: 7
      },
      markers: { },
  
      layers: {
              baselayers: {
                  osm: {
                      name: 'OpenStreetMap',
                      url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                      type: 'xyz'
                  },
                  landscape: {
                      name: 'Landscape',
                      url: 'http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}\.png',
                      type: 'xyz'
                  },
  
              }
          },
  });   
  
   var pos = [
      {            
          "lat": "51.918374",
          "lng": "19.594210"
      },
      {            
          "lat": "51.018374",
          "lng": "19.094210"
      },
       {
  
          "lat": "52.518374",
          "lng": "19.594210"
      },
      {            
          "lat": "52.018374",
          "lng": "19.694210"
      }
  ];
  
  var setMarkers = function () {
  
  
      var markers = {}; 
     angular.forEach(pos, function(value, key) {
  
  
                  markers = {
                      lat: value.lat,
                      lng: value.lng,
                      message: 'aaa',
                      focus: true,
                      draggable: false
                  };                   
  
              $scope.markers = markers;
              console.log(markers);
   });             
  
   };     
          setMarkers();    
  
  }]);
  </code></pre>
  
  <p>When I try this code I received:</p>
  
  <pre><code>Object {lat: "51.918374", lng: "19.594210", message: "aaa", focus: true, draggable: false} Map2Ctrl.js:93
  Object {lat: "51.018374", lng: "19.094210", message: "aaa", focus: true, draggable: false} Map2Ctrl.js:93
  Object {lat: "52.518374", lng: "19.594210", message: "aaa", focus: true, draggable: false} Map2Ctrl.js:93
  Object {lat: "52.018374", lng: "19.694210", message: "aaa", focus: true, draggable: false} Map2Ctrl.js:93
  TypeError: Cannot read property 'lat' of null
  </code></pre>
  
  <p><a href="http://tombatossals.github.io/angular-leaflet-directive/#!/examples/simple-map" rel="nofollow">In project page</a> is missing info about data binding, so I'm trying  experiment around.  Please, give me some suggestion whats is wrong.</p>
  
  <p>PS.  Further investigation solved my problem. Below is working code:</p>
  
  <pre><code>var markers ={ };
  var pos = [
  {      
      lat: 51.918374,
      lng: 19.594210
  },
  {        
      lat: 51.018374,
      lng: 19.094210
  },
   {        
      lat: 52.518374,
      lng: 19.594210
  },
  {        
      lat: 52.018374,
      lng: 19.694210
  }];
  
   var i = 0;
   angular.forEach(pos, function(value, key) {
     markers[i++]={
       lat: value.lat,
       lng: value.lng,
       message: "aaaa",
       focus: false,
       draggable: false
      }
   };
  
  $scope.markers =markers
  });
  </code></pre>