Can't update variable in angular.js

I'm building a Ionic application with angular.js, I'm almost done, but now I have a minor trouble.

In my templates/menu.html I have:

<ion-item nav-clear menu-close ng-click="filterByPeriod(weekBegin, currentDate)">Filter  </ion-item>

and my controller.js:

.controller('Home', ['$scope', '$ionicModal', '$cordovaGeolocation', function($scope, $ionicModal, $cordovaGeolocation) {
  App = {
    init: function() {
      setTimeout(function(){
        $scope.map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
      }, 200);
    },
  };
  $scope.addMarkersToMap = function(reports, map) {
    var newCenter = new google.maps.LatLng(reports[0].latitude, reports[0].longitude);

    map.setCenter(newCenter);
    map.setZoom(12);
  }

  $scope.filterByPeriod = function(beginDate, endDate) {
    var cityId = window.localStorage.getItem('cityId');

    serviceReports.getDenunciasFromPeriod(cityId, beginDate, endDate)
    .success(function(reports){
      $scope.addMarkersToMap(reports.dados, $scope.map);
    });
  }
  App.init();
}]);

I already try do this with a `$scope.apply(function(){}) that encapsulates this method but with both ways I'm catching this error:

http://cl.ly/image/200O1d2F1C46

Anyone have any idea how to solve this problem?

$scope.map is not defined. It might be that you didn't get anything from the google map library or it hasn't populate the data yet. You might want to use a promise to then use the variable or disable the button until the data is there.

Your map object is not initialized correctly. I suspect your document.getElementById("map-canvas") which should not work correctly in a controller : DOM manipulation is not synchronized with the angular digest cycle.

Prefer using a directive, you can look how I did it :

https://github.com/bennekrouf/ng-formation/blob/master/app-directives/app/app.js