Getting blank screen - angularjs

Question

I am trying to see my cards on template, the issue that I cant see it only after I am doing $state.reload(); or open side menu,
My template looks like:
<ion-view>
<ion-nav-title> {{'nearPlaces_title'| translate}}
</ion-nav-title>
<ion-content>
<div class="bar bar-header item-input-inset">
<input id="autocomplete" type="search" placeholder="Search" g-places-autocomplete ng-model="myScopeVar"/>
</div>
<ion-refresher pulling-text="Pull to refresh" on-refresh="doRefresh()">
</ion-refresher>
<div class="list">
<a ng-repeat="item in items" class="item card"
href="#/tab/details/{{item.queId}}">
<div class="row">
<div class="col col-25">
<img ng-src="{{ item.entrancePhotoUrl }}" style="height:90%;width:90%">
</div>
<div class="col col-50" >
<div >
{{ item.name }}
</div>
<p style="text-wrap: normal;">
{{ item.streetAddress }}
</p>
</div>
<div class="col col-25">
<wj-radial-gauge
value="item.waitTimeEstimationSec"
min="{{config.minTimeToWaite}}"
max="{{config.maxTimeToWaite}}"
start-angle="-60"
sweep-angle="240"
is-read-only="true"
show-ranges="true">
<wj-range wj-property="pointer" thickness="0.5"></wj-range>
<wj-range min="0" max="{{max*.33}}" color="rgba(100,255,100,.2)"></wj-range>
<wj-range min="{{max*.33}}" max="{{max*.66}}" color="rgba(255,255,100,.2)"></wj-range>
<wj-range min="{{max*.66}}" max="{{max}}" color="rgba(255,100,100,.2)"></wj-range>
</wj-radial-gauge>
</div>
</div>
</a>
</div>
</ion-content>
also no errors on console
Update:
.controller('PlaceslistsCtrl', function ($scope, LocationService, PlacesService, $state) {
$scope.items = [];
LocationService.getNearPlaces().then(function (data) {
for (var i = 0; i < data.length; i++)
$scope.items.push(data[i].attributes);
$scope.config = configData;
PlacesService.setData($scope.items);
var input = document.getElementById('autocomplete');
var autocomplete = new google.maps.places.Autocomplete(input, {
types: ['(establishment)'],
componentRestrictions: {country: "il"}
});
google.maps.event.addListener(autocomplete, 'place_changed', function () {
var place = autocomplete.getPlace();
});
//$state.reload();
});

Answer 1

It looks like LocationService.getNearPlaces() returns promise, but if it doesn't use build-in services for that, you should call $scope.$apply() in the end of callback
.controller('PlaceslistsCtrl', function ($scope, LocationService, PlacesService, $state) {
$scope.items = [];
LocationService.getNearPlaces().then(function (data) {
for (var i = 0; i < data.length; i++)
$scope.items.push(data[i].attributes);
$scope.config = configData;
PlacesService.setData($scope.items);
var input = document.getElementById('autocomplete');
var autocomplete = new google.maps.places.Autocomplete(input, {
types: ['(establishment)'],
componentRestrictions: {country: "il"}
});
google.maps.event.addListener(autocomplete, 'place_changed', function () {
var place = autocomplete.getPlace();
});
//$state.reload();
$scope.$apply();
});