Объект не отображается на листочке angularJS

Question

Я делаю небольшое приложение для обучения с помощью AngularJS, и у меня есть проблема. Я получаю данные JSON через API, а затем я показываю его на карте, используя директивы лифлета для Angular.

Проблема в том, что я пытаюсь отобразить, дайте мне ошибку.

Это мой контроллер:

toulouseVeloControllers.controller('toulouseVeloListCtrl', ['$scope', '$http', 
    function($scope, $http) { 

     angular.extend($scope, { 
      osloCenter: {}, 
      markers: {}, 
      defaults: { 
       scrollWheelZoom: false 
      } 
     }); 


     $http.get('https://api.jcdecaux.com/vls/v1/stations?contract=toulouse&apiKey=*************************************').success(function(data) { 

      $scope.bornes = data; 

      $scope.markers=[]; 
      $scope.osloCenter=[]; 

      for (var i = 0; i < data.length; i++) { 

       $scope.markers[i] = { 
        lat: data[i].position.lat, 
        lng: data[i].position.lng, 
        message: data[i].available_bikes, 
        focus: false, 
        draggable: false 
       }; 
      } 

      $scope.osloCenter = { 
       lat: data[10].position.lat, 
       lng: data[10].position.lng, 
       zoom: 15 
      }; 
     }); 
    }]); 

И это мой HTML:

<div ng-controller="toulouseVeloListCtrl"> 
    <leaflet markers="markers" center="osloCenter" style="width: 100%; height: 500px;"></leaflet> 
</div> 

В $scope.markers[i], когда я пытаюсь показать data[i].available_bikes, это даст мне ошибку, но если я пытаюсь показать другой подобный data[i].name или data[i].address, проблем нет.

Любой может сказать мне, что здесь не так?

Большое вам спасибо!

Answer 1

Содержимое всплывающего окна должно быть строкой.

for (var i = 0; i < data.length; i++) { 

    $scope.markers[i] = { 
     lat: data[i].position.lat, 
     lng: data[i].position.lng, 
     message: "Available Bikes: " + data[i].available_bikes, 
     focus: false, 
     draggable: false 
    }; 
} 

https://jsfiddle.net/tombatossals/4PhzC/