Angularjs get getNorthEast and getSouthWest - angularjs

Question

You can see my code from the fiddle page below. There's no problem with the map and markers, but I need the South West and North East coordinates.
code fiddle link is here
I try this, but it does not work.
var bounds = map.getBounds();
var ne = bounds.getNorthEast(); // LatLng of the north-east corner
var sw = bounds.getSouthWest(); // LatLng of the south-west corder
var nw = new google.maps.LatLng(ne.lat(), sw.lng());
var se = new google.maps.LatLng(sw.lat(), ne.lng());
angular.module('hotelApp', [])
.controller('ContentControler', function ($scope, $timeout) {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(40.0000, -98.0000),
mapTypeId: google.maps.MapTypeId.TERRAIN
}
$scope.location_name = "";
$scope.names = [{
prop_Name: 'Location 1',
prop_Addr: '123 Easy Street',
prop_Price: 325.00,
prop_Dist: .25,
prop_Desc: 'This is the First Location.',
lat: 43.7000,
long: -79.4000
}, {
prop_Name: 'Location 2',
prop_Addr: '456 Easy Street',
prop_Price: 114.00,
prop_Dist: 3,
prop_Desc: 'This is the Second Location.',
lat: 40.6700,
long: -73.9400
}, {
prop_Name: 'Location 3',
prop_Addr: '789 Easy Street',
prop_Price: 98.00,
prop_Dist: 4,
prop_Desc: 'This is the Third Location.',
lat: 41.8819,
long: -87.6278
}, {
prop_Name: 'Location 4',
prop_Addr: '1011 Easy Street',
prop_Price: 150.00,
prop_Dist: 1,
prop_Desc: 'This is the Fourth Location.',
lat: 34.0500,
long: -118.2500
}, {
prop_Name: 'Location 5',
prop_Addr: '1213 Easy Street',
prop_Price: 250.00,
prop_Dist: 7,
prop_Desc: 'This is the Firth Location.',
lat: 36.0800,
long: -115.1522
}];
$scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);
$scope.markers = [];
var infoWindow = new google.maps.InfoWindow();
var createMarker = function (info) {
var marker = new google.maps.Marker({
map: $scope.map,
position: new google.maps.LatLng(info.lat, info.long),
title: info.prop_Name
});
marker.content = '<div class="infoWindowContent"><ul>' + '<li>' + info.prop_Desc + '</li>' + '<li>' + info.prop_Addr + '</li>' + '<li>' + info.prop_Price + '</li>' + '<li>' + info.prop_Dist + '</li>' + '</ul></div>';
google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
infoWindow.open($scope.map, marker);
});
$scope.markers.push(marker);
}
for (i = 0; i < $scope.names.length; i++) {
createMarker($scope.names[i]);
}
$scope.openInfoWindow = function (e, selectedMarker) {
e.preventDefault();
google.maps.event.trigger(selectedMarker, 'click');
}
//Max Location Price
$scope.maxPrice = 500;
$scope.priceRangeFilter = function (location) {
return location.prop_Price <= $scope.maxPrice;
};
//Max POI Radius
$scope.maxRadius = 15;
$scope.radiusRangeFilter = function (location) {
return location.prop_Dist <= $scope.maxRadius;
};
$scope.$watch('nas',
function (newValue, oldValue) {
for (jdx in $scope.markers) {
$scope.markers[jdx].setMap(null);
}
$scope.markers = [];
for (idx in $scope.nas) {
createMarker($scope.nas[idx]);
}
}, true);
});
#map {
height:420px;
width:600px;
}
.infoWindowContent {
font-size: 14px !important;
border-top: 1px solid #ccc;
padding-top: 10px;
}
h2 {
margin-bottom:0;
margin-top: 0;
}
<script src="https://maps.googleapis.com/maps/api/js?key=&sensor=false&extension=.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="hotelApp" ng-controller="ContentControler">
<h2>Filters</h2>
<p>Location Name:
<input type="text" ng-model="location_name">
</p>
<p>Maxium Price:
<input type="text" ng-model="maxPrice">
</p>
<p>POI Search Radius:
<input type="text" ng-model="maxRadius">
</p>
<div id="map"></div>
<div id="class" ng-repeat="marker in markers"></div>
<ul>
<li ng-repeat="x in nas = (names | filter:{prop_Name:location_name} | filter:priceRangeFilter | filter:radiusRangeFilter)">{{ x.prop_Desc + ', ' + x.prop_Addr + ', ' + '$' + x.prop_Price }}</li>
</ul>
</div>

Answer 1

In order to get bounds you need to put your code inside a event listener as 'idle' or 'bounds_changed'
google.maps.event.addListenerOnce($scope.map, 'idle', function(){
var bounds = $scope.map.getBounds();
var ne = bounds.getNorthEast(); // LatLng of the north-east corner
var sw = bounds.getSouthWest(); // LatLng of the south-west corder
var nw = new google.maps.LatLng(ne.lat(), sw.lng());
var se = new google.maps.LatLng(sw.lat(), ne.lng());
});

Answer 2

I solved the problem :)
google.maps.event.addListener($scope.map, 'idle', function(event){
var lat0 = $scope.map.getBounds().getNorthEast().lat();
var lng0 = $scope.map.getBounds().getNorthEast().lng();
var lat1 = $scope.map.getBounds().getSouthWest().lat();
var lng1 = $scope.map.getBounds().getSouthWest().lng();
});
this is working well but how to show lat0 in marker funtion
var createMarker = function (info) {
var marker = new google.maps.Marker({
map: $scope.map,
position: new google.maps.LatLng(info.lat, info.lng),
title: info.prop_Name,
animation: google.maps.Animation.DROP,
?? here ??
});
}