javascript - AngularJs updating view in controller's event listener -

in app fetch list of objects server. render them @ left sidebar list , @ map (leaflet) markers on same page. render markers/map via service , sidebar list via controller , simple view.

when user clicks on item list or on marker map broadcast event $rootscope.

user clicks on sidebar item -> code triggered:

// in view <div ng-click="markerclicked(object)">...</div>  // in controller $scope.markerclicked = function(object) {     $rootscope.$broadcast('markerclicked', object); }; 

user clicks on marker -> code triggered:

angular.foreach(markers, function(object) {     var _marker = l.marker([object.longitude, object.latitude],{         clickable: true     });      _marker.on('click', function(e) {         $rootscope.$broadcast('markerclicked', object)     });      _marker.addto(service.map);     service.layer.addlayer(_marker); }); 

---

i catch event in 1 controller:

// tried $rootscope.$on() $scope.$on('markerclicked', function(event, object) {     $scope.object = object;     $scope.hidden = false;     console.log('event fires'); }); 

$scope.hidden here flag conditional rendering modal window (popup).

the problem here whenever click on sidebar item or map marker, console logs 'event fires' , other code lines work well, but modal window appears if click on sidebar item.

in other words, when click on marker 'event fires' in dev console, see $scope.hidden equals false but modal window not appears.

if has met similar issue please point me doing wrong.

---

i use webpack, maybe matters.

try this

$scope.$on('markerclicked', function(event, object) {      $scope.$apply(function(){        $scope.object = object;        $scope.hidden = false;     })     console.log('event fires'); });