Attempting to show data retrieved from Google's Place Service. Oddly enough, the object can be logged to the console within the controller, but the directives in the HTML file remain blank. Since no map is being used, a div element was passed as the node. There seems to be limited guidance online for displaying attributes in this manner, so I attempted assigning the object to a scope variable and displaying it that way. The $scope.location outputs a perfectly valid object to the console screen, however, using an ng-bind or ng-show directive does not yield any results.
controllers.js
Controllers.controller("LocationController", ["$routeParams", "$scope", "$location", function($routeParams, $scope, $location) {
if (!$routeParams.placeId) return $location.path("/");
var PlaceService;
$(document).ready(function() {
PlaceService = new google.maps.places.PlacesService(document.getElementById("locationContainer"));
});
PlaceService.getDetails({ placeId: $routeParams.placeId }, function(place, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
$scope.location = place;
return console.log($scope.location);
}
return console.log("ERROR: " + status);
});
}]);
location.html:
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="col-xs-4">
<img ng-src="{{ location.icon }}">
</div>
<div class="col-xs-8">
<p ng-bind="location.name"></p>
</div>
</div>
</div>
</div>
<div id="locationContainer"></div>
Console output:
Object { address_components=[9], adr_address="<span class="street-addr...ountry-name">USA</span>", formatted_address="935 W Wisconsin Ave, Milwaukee, WI 53233, USA", more...}