How do I update the $rootScope.$broadcast with a new value?
Let's take a look at this code snippet:
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);
}
This is how my controller looks like:
$scope.$on('mapInfo', function(event, mapInfo) {
$scope.mapInfo = mapInfo;
console.log($scope.mapInfo);
});
And here is the relevant part of my html:
<div ng-bind-html="safeHtml(mapInfo)"></div>
Most of it works fine. The mapInfo gets updated and displayed on the page when making an ajax call. However, if no ajax call is made, the value of "fish" is not displayed on the page. Even though the $rootScope updates correctly with the value "fisk": console.log($scope.mapInfo), it just doesn't show up.