Dynamically add multiple markers to Angular Google Map + pagination

Question

I am creating an angular/node/express app. One page must display a list of locations (from JSON file) and also plot each location on a google map. This list of locations is being populated when a user clicks a button that calls getLocations(). The catch is that my list of locations is using pagination and only displaying up to 5 results at a time. I need my map to only display these same 5 locations at a time and change when the page changes.

I'm newer to angular and having trouble dynamically loading the locations onto the map using the ui-gmap-markers directive. I only have the list of locations working with pagination right now. Any ideas of how to get the map markers to work?

JSON Snippet:

[{"LOC_ID":"0001","LONGITUDE":-115.175777,"LATITUDE":36.098731,"LOC_NAME":"ABC","ADDRESS":"3850 S LAS VEGAS BLVD","CITY":"LAS VEGAS","STATE":"NV","ZIP":"89109"},{"LOC_ID":"0002","LONGITUDE":-115.170801,"LATITUDE":36.099031,"LOC_NAME":"DEF","ADDRESS":"3801 S LAS VEGAS BLVD","CITY":"LAS VEGAS","STATE":"NV","ZIP":"89109"},{"LOC_ID":"0003","LONGITUDE":-115.176116,"LATITUDE":36.095784,"LOC_NAME":"GHI","ADDRESS":"3900 S LAS VEGAS BLVD","CITY":"LAS VEGAS","STATE":"NV","ZIP":"89109"},{"LOC_ID":"0004","LONGITUDE":-115.428098,"LATITUDE":36.135511,"LOC_NAME":"JKL","ADDRESS":"3205 NEVADA 159","CITY":"LAS VEGAS","STATE":"NV","ZIP":"89161"},{"LOC_ID":"0005","LONGITUDE":-115.170221,"LATITUDE":36.112358,"LOC_NAME":"MNO","ADDRESS":"3655 S LAS VEGAS BLVD","CITY":"LAS VEGAS","STATE":"NV","ZIP":"89109"},{"LOC_ID":"0006","LONGITUDE":-115.168525,"LATITUDE":36.122917,"LOC_NAME":"PQR","ADDRESS":"3355 S LAS VEGAS BLVD","CITY":"LAS VEGAS","STATE":"NV","ZIP":"89109"},{"LOC_ID":"0007","LONGITUDE":-115.156306,"LATITUDE":36.147695,"LOC_NAME":"STU","ADDRESS":"2000 S LAS VEGAS BLVD","CITY":"LAS VEGAS","STATE":"NV","ZIP":"89104"}]

Jade Snippet:

.button(ng-click="getLocations()")
.location-details
  ul
    li(ng-repeat"location in locations | startFrom:currentPage*pageSize | limitTo:pageSize")
      h3 {{location.name}}
      span {{location.address}}
      span {{location.city}}
      span {{location.state}}
      span {{location.zip}}
.map
  .angular-google-map-container
    ui-gmap-google-map(center='map.center' zoom='map.zoom')
      ui-gmap-markers

Controller Snippet:

$scope.getLocations = function(){
    $scope.jsonUrl = 'https://mytestsite.com/locations.json';
    $http.get($scope.jsonUrl)
    .then(function (response) {
        $scope.locations = response.data
        $scope.jsonLength = $scope.locations.length;
        for (var i = 0; i<=$scope.jsonLength - 1; i++) {
            //doing custom stuff here
        }
        $scope.pagingResults();
    }
};
$scope.map = {
    center: {
        latitude: 39.7701769,
        longitude: -98.5815046,
    },
    zoom: 8
};