angular-leaflet-directive example fiddle

http://angularjs.org/

HTML

<script src="http://tombatossals.github.io/angular-openlayers-directive/bower_components/openlayers3/build/ol.js"></script>
<script src="http://tombatossals.github.io/angular-openlayers-directive/bower_components/angular/angular.min.js"></script>
<link rel="stylesheet" href="http://tombatossals.github.io/angular-openlayers-directive/bower_components/openlayers3/build/ol.css">
<script src="http://tombatossals.github.io/angular-openlayers-directive/bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script src="https://rawgit.com/tombatossals/angular-openlayers-directive/latest/dist/angular-openlayers-directive.min.js"></script>
<ion-view view-title="Map" ng-controller="MapCtrl" >
  <ion-panel id="panelpad">
 
 


<openlayers ol-defaults="defaults" ol-center="center" ol-markers="markers" width="100%" height="400px">
    <ol-layer ol-layer-properties="layers"></ol-layer>
    <ol-marker ng-repeat="marker in markers" lat="marker.lat" lon="marker.lon"></ol-marker>
</openlayers>
{{markers}}
  </ion-panel>
</ion-view>

JavaScript

var app = angular.module('demoapp',['openlayers-directive']);


///////// OPEN LAYERS ///////////

var markers = [];

/// Map Controller
app.controller('MapCtrl', function ($scope, $filter, $http) {
   
 // Call HTTP GET
    $scope.map_data = [];
    $http.get('http://localhost:81/SNIP_manager/www/api/v1/map_data2').then(function(response){
    $scope.map_data = response.data;

      // Call forEach
        $scope.processed_data = [];

        angular.forEach(response.data.data, function(value, key) {
            var tmp = {name: value.name, lon: value.lon, lat: value.lat};
            $scope.processed_data.push(tmp);
        });
        
       var markers = $scope.processed_data;

      // End forEach

    }); 
  // Close HTTP GET Response
  
  // Definir la var markers.
    var markers = [$scope.processed_data];
    //var markers = [{id: 14, name: 'Sea1', lat: 51.505, lon: -20}];

    
  // Préférences de la carte
     angular.extend($scope, {
        markers: markers,
        defaults: {
                        interactions: {
                          mouseWheelZoom: true
                        },
                        controls: {
                            zoom: true,
                            rotate: false,
                            attribution: false
                        }
                  },
        layers: {
                   source: {
                        type: 'MapQuest',
                        layer: 'osm' //sat
                            }
                        
                },                   
        center: {
                        lat: 45.000,
                        lon: -2.000,
                        zoom: 4
                    }

     });
  // Close Préférences 

  
  });
// Close Controller