With Angular update the scope from an event handler - angularjs

Question

I am having one issue I was hoping someone would help me on. I am using Angular and the angular google maps directive. I have an event handler registered on idle so that I want to update what markers are shown but when the event is handled it returns the map and I've lost scope so I am unsure how to add new markers onto the map?
I setup a map like so:
<google-map center="map.center" zoom="map.zoom" events="map.events"> <markers> <marker ng-repeat="marker in map.markers" coords="marker"> </marker> </markers> </google-map>
That then uses the following to setup its initial values on events:
$scope.map = {
center: {
latitude: 45,
longitude: -73
},
zoom: 8,
events:{
idle:getJobs
},
markers:[]
};
When the event fires the getJobs function I have lost the scope so cannot push new markers onto the map with angular, any ideas??
function getJobs($scope) {
self = this;
JobService.getJobs(self.map).then(function(jobData){
for (var i = 0; i < jobData.length; i++) {
var job = jobData[i];
if (job.get('location') != null && job.get('location').longitude != null) {
$scope.map.markers.push(createJobMarker(job.get('role'),job.get('location').longitude,job.get('location').latitude),i);
}
}
});
}

Answer 1

Try
function getJobs($scope) {
self = this;
JobService.getJobs(self.map).then(function(jobData){
$scope.apply(function () {
for (var i = 0; i < jobData.length; i++) {
var job = jobData[i];
if (job.get('location') != null && job.get('location').longitude != null) {
$scope.map.markers.push(createJobMarker(job.get('role'),job.get('location').longitude,job.get('location').latitude),i);
}
}
});
});
}
Update:
I see, you are just losing reference to the scope variable. Try setting up your event like this:
$scope.map = {
center: {
latitude: 45,
longitude: -73
},
zoom: 8,
events:{
idle: function () {
getJobs($scope);
}
},
markers:[]
};