After looking into your codepen and experimenting with it, I discovered that the issue is resolved when you remove the line "scope: $scope". It seems that by following the example from the documentation on $ngDialog, which includes adding the option "preserveScope: true," you can achieve the desired outcome.
// Dialog #3 - Demonstrate use of ControllerAs and passing $scope to dialog
// Here we used ng-controller="GreetingController as vm" and
// $scope.vm === <controller instance="">
function showCustomGreeting() {
$mdDialog.show({
clickOutsideToClose: true,
scope: $scope, // use parent scope in template
preserveScope: true, // do not forget this if use parent scope
// Since GreetingController is instantiated with ControllerAs syntax
// AND we are passing the parent '$scope' to the dialog, we MUST
// use 'vm.<xxx>' in the template markup
template: '<md-dialog>' +
' <md-dialog-content>' +
' Hi There {{vm.employee}}' +
' </md-dialog-content>' +
'</md-dialog>',
controller: function DialogController($scope, $mdDialog) {
$scope.closeDialog = function() {
$mdDialog.hide();
}
}
});
}
For more information about the scope options, refer to the documentation excerpt below.
scope - {object=}: the scope to link the template / controller to. If none is specified, it will create a new isolate scope. This scope will be destroyed when the dialog is removed unless preserveScope is set to true.
This approach can also be applied to your chatDialog. Please view the updated codepen for reference.
You are currently using the 'AppCtrl' controller for your dialog, which causes the controller to be re-instantiated inside the dialog. To rectify this, make sure your code resembles the following snippet.
$scope.openChatDialog = function() {
$mdDialog.show({
scope: $scope,
preserveScope: true,
template: '<md-button ng-click="openChat(\'everybody\')">Everybody</md-button><md-button ng-repeat="user in collaborators" ng-click="openChat(user)"><svg class="status-light" height="17" width="17"><circle cx="8" cy="8" r="8" fill="lightGreen" /></svg>{{user}}</md-button>',
hasBackdrop: false,
clickOutsideToClose: true,
openFrom: '#chat-btn',
closeTo: '#chat-btn'
})
};