Angularjs: $scope.emit is not working

Question

I am a newbie at angularjs and i am creating a web application to earn experience and practice. The problem i have is that $scope.$emit does not seem to be working, i am looking for ways to contact functions between controllers and so far i have found on the internet that $scope.emit and $scope.on seems to fit for this kind of task, if there is another way, i would like to know, anyways the code are written like this:

loginController.js

(function(angular)
{
    var app = angular.module('Organizer');

    // inject $scope to the controller in order to try $scope.$emit
    app.controller('login', function($http, $scope)
    {
        // i define the scope like this so i can access inside other functions
        var scope = this;
        scope.processing = false;
        scope.message = null;

        scope.submit = function()
        {
            scope.processing = true;

            // store data for post
            var post = {
                username: scope.username,
                password: scope.password
            };

            // send post data
            $http.post('api/default/login', post).
                success(function(data, status)
                {
                    // hide processing feedback and show the result
                    scope.processing = false;
                    scope.message = data.message;
                }).
                error(function(data, status)
                {
                    scope.processing = false;
                });
        };

        // Function i use to emit
        this.closeDialog = function()
        {
            $scope.$emit('closeDialog');
        };
    });
})(angular);

siteController.js

(function(angular)
{
    var app = angular.module('Organizer');

    app.controller('site', function($mdDialog, $scope)
    {
        this.menu = ['test1', 'test2'];

        this.dialog = function()
        {
            $mdDialog.show({
                templateUrl: 'site/login',
            });
        };

        // this does not seem to be working
        $scope.$on('closeDialog', function(event)
        {
            console.log('close dialog');
        });
    });
})(angular);

Note: i am using angular material and you can see i am showing a dialog which is a login, the login has its controller (i wanted it to use the same site controller, but i don't know how) and this dialog has a button which calls the function closeDialog() in loginControler and should close the dialog, but for now for testing reasons i am just logging if it's calling the event

Answer 1

The $emit function propagate an event only to the scopes parents.

The $broadcast function propagate an event to the scopes childs.

So what you need depends on how the controllers are use it...

If you want an event to reach all the app you have to use the $rootScope:

$rootScope.$broadcast('myEvent');

Here you have the doc of the scope, include $emit and $broadcast

Answer 2

You could not emit or broadcast in dialog controller because dialog in angular material has isolated scope. Because of that, when you emit or broadcast an event, it does not go anywhere. The $emit and $broadcast only works when you have scope hierarchy. $emit propagate event up the hierarchy and $broadcast propagate event down the hierarchy.