在Angular中的对象内部访问数组中的对象

Question

I am having quite a hard time accessing data from an api call and having it shown on Mapbox. I am able to have one marker shown on the map, while I should have 10 markers. I think I am doing something wrong with ng-repeat, but I am not sure what. Any help would be appreciated.

Here is a link to view the full JSON response from the API call http://jsonblob.com/55e734cee4b01190df374f1e

// index.html
  <div ng-repeat="venue in bars.venues">
    <marker lat="{{venue.location.lat}}" lng="{{venue.location.lng}}">
      <h1>{{venue.name}}</h1>
      <p>{{venue.contact}}</p>
      <p>{{venue.location.formattedAddress}}</p>
    </marker>
  </div>

// app.js
    $http.get(url)
      .then(function (response) {
        $scope.bars = response.data.response;
    });

// sample data from api
{
  "meta": {
    "code": 200,
    "requestId": "55e72707498e3d9a002d7bc4"
  },
  "response": {
    "venues": [
      {
        "id": "42c1e480f964a520c4251fe3",
        "name": "The View",
        "contact": {
          "phone": "4158961600",
          "formattedPhone": "(415) 896-1600"
        },
        "location": {
          "address": "55 4th St",
          "crossStreet": "at Marriott Marquis",
          "lat": 37.78510950100554,
          "lng": -122.40469515323639,
          "distance": 29,
          "postalCode": "94103",
          "cc": "US",
          "city": "San Francisco",
          "state": "CA",
          "country": "United States",
          "formattedAddress": [
            "55 4th St (at Marriott Marquis)",
            "San Francisco, CA 94103",
            "United States"
          ]
        },
        "categories": [
          {
            "id": "4bf58dd8d48988d1d5941735",
            "name": "Hotel Bar",
            "pluralName": "Hotel Bars",
            "shortName": "Hotel Bar",
            "icon": {
              "prefix": "https://ss3.4sqi.net/img/categories_v2/travel/hotel_bar_",
              "suffix": ".png"
            },
            "primary": true
          }
        ],
        "verified": false,
        "stats": {
          "checkinsCount": 12634,
          "usersCount": 9499,
          "tipCount": 121
        },
        "url": "http://www.sfviewlounge.com",
        "hasMenu": true,
        "menu": {
          "type": "Menu",
          "label": "Menu",
          "anchor": "View Menu",
          "url": "https://foursquare.com/v/the-view/42c1e480f964a520c4251fe3/menu",
          "mobileUrl": "https://foursquare.com/v/42c1e480f964a520c4251fe3/device_menu"
        },

Answer 1

So I figured out why only one marker was showing. I was previously using angular google maps and had ngMaps as a module. After I deleted it, all my markers showed.