update $rootScope.$broadcast

Question

How can I update $rootScope.$broadcast with new value?

Consider this code:

var test = "fisk";

if(angular.element(this).hasClass('monster')) {
    var monster_info = angular.element(this).find("img").attr("title");
    $http.get("lib/terrain.php", {params: { monster_data:monster_info}}).success(function(data) {
            console.log(data);
            $rootScope.$broadcast('mapInfo', data);
    });
} else {
  $rootScope.$broadcast('mapInfo',test);
}

Here is my controller:

$scope.$on('mapInfo', function(event, mapInfo) {
    $scope.mapInfo = mapInfo;
    console.log($scope.mapInfo);
});

Here is my html:

<div ng-bind-html="safeHtml(mapInfo)"></div>

This almost works. When I make the ajax-call, the mapInfo is updated and printed out at the page with the data. But when I'm not make the ajax-call, the value of fish is not printed out at the page. I can see that the $rootScope is being updated by the value fisk: console.log($scope.mapInfo), but it's not printed out.

Answer 1

This is a simplified version of your code

`http://jsfiddle.net/HB7LU/5693/`

it can print out mapInfo