How to position markers

Hello,

I'm having an issue to use the directive.

I'm fetching a list of bus stops from an API, and I would like to show them on a map.

My dependencies :

<!-- DataTables CSS -->
<link href="css/dataTables.bootstrap.min.css" rel="stylesheet">

<!-- DataTables Responsive CSS -->
<link href="css/dataTables.responsive.css" rel="stylesheet">

<!-- MetisMenu CSS -->
<link rel="stylesheet" href="css/metisMenu.css">

<!-- Custom CSS -->
<link href="css/sb-admin-2.css" rel="stylesheet">
<!-- Custom CSS -->

<!-- Custom Fonts -->
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">

<link rel="stylesheet" href="css/ng-table.css">
<link href="css/angular-chart.css" rel="stylesheet">
<link rel="stylesheet" href="http://openlayers.org/en/v3.0.0/css/ol.css" type="text/css">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

<!-- jQuery -->
<!-- Custom Theme JavaScript -->
<script src="js/libs/angular.min.js" type="text/javascript"></script>
<script src="js/libs/jquery.js" type="text/javascript"></script>

<!-- Bootstrap Core JavaScript -->
<script src="js/libs/bootstrap.min.js" type="text/javascript"></script>

<script src="js/libs/ol.js"></script>
 <script src="http://tombatossals.github.io/angular-openlayers-directive/dist/angular-openlayers-directive.min.js"></script>
<script src="js/libs/angular-sanitize.min.js" type="text/javascript"></script>
<script src="js/libs/angular-resource.js" type="text/javascript"></script>
<script src="js/libs/angular-route.js" type="text/javascript"></script>
<script src="js/libs/angular-cookies.js" type="text/javascript"></script>
<script src="js/libs/angular-ui-router.js" type="text/javascript"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="js/libs/metisMenu.min.js" type="text/javascript"></script>
<script src="js/libs/ng-table.js" type="text/javascript"></script>
<script src="js/libs/Chart.min.js" type="text/javascript"></script>
<script src="js/libs/angular-chart.js" type="text/javascript"></script>
<!-- DataTables JavaScript -->
<script src="js/libs/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="js/libs/dataTables.bootstrap.min.js" type="text/javascript"></script>`

my app :

var app = angular.module('app', [ 'ngResource', 'ui.router', 'ngCookies', 'ngTable', 'openlayers-directive', 'chart.js', 'Stop' ]);

and the controller :

`$scope.getMarkers = function () { StopService.getAll(function(response, data) { if(response) { $scope.stops = [];

               angular.forEach(data["data"], function(value, key){
                  $scope.stops.push({
                        name: value["name"],
                        lat: value["latitude"],
                        lon: value["longitude"], 
                        label: {
                            message: value["name"],
                            show: false,
                            showOnMouseOver: true
                        }
                  });
              });

               angular.extend($scope, {
                    center: {
                        lat: 51.505,
                        lon: -0.09,
                        zoom: 7
                    },
                    markers: $scope.stops
                });
            } else {
                $scope.error = response.message;
            }
        });
    };`

the html: `

the result: markers in the middle of the atlantic ocean

Thank you for your help.

tombatossals / angular-openlayers-directive

How to position markers #251