With $broadcast

Example using properties and services to share information rather than relying on $scope.$emit and $scope.$broadcast

by Jeremy Likness

HTML

<script src="https://code.angularjs.org/1.3.4/angular.js"></script>
<div ng-app="myApp">
    <div ng-controller="genderCtrl">
        <select ng-options="g as g for g in genders" ng-model="selectedGender"></select>
    </div>
    <div ng-controller="babyCtrl">It's a {{genderText}}!</div>
    <div ng-controller="watchCtrl">Changed {{watches}} times.</div>
</div>

JavaScript

(function (app) {

    var genders = ['Male', 'Female'],
        labels = ['boy', 'girl'];

    function GenderController ($scope, $rootScope) {
        $scope.genders = genders;
        $scope.selectedGender = genders[0];
        $scope.$watch('selectedGender', function () {
            $rootScope.$broadcast('genderChanged', $scope.selectedGender);
        });
    }

    function BabyController($scope) {
        $scope.genderText = labels[0];
        $scope.$on('genderChanged', function (evt, newGender) {
            console.log(newGender);
            $scope.genderText = 
                newGender === genders[0] ? labels[0] : labels[1];
        });
    }
    
    function WatchController($scope) {
        $scope.watches = 0;
        $scope.$on('genderChanged', function () {
            $scope.watches += 1;
        });
    }
    
    app.controller('genderCtrl', GenderController);
    app.controller('babyCtrl', BabyController);
    app.controller('watchCtrl', WatchController);
    
})(angular.module('myApp', []));