angular.module('telavox.test', []) .factory('BroadcastingService', function($rootScope) { $rootScope.$broadcast('myBroadcast', true); return {}; }) .controller('MyListLengthAddedController', function($scope, BroadcastingService) { $scope.received = false; $scope.$on('myBroadcast', function(ev, data) { $scope.received = data; }); })
<div ng-app="telavox.test"> <div> <div class="controller" data-ng-controller="MyListLengthAddedController"> Received event: {{received}} </div> </div> </div>
</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script> <style> .error { color: red; } .controller { border: thin solid green; padding: 0.3em; margin: 0.3em; }