How can I have one AngularJS app affect another?

Question

I created one angularjs app that handles user creation. By choosing a user type, it'll display the required input fields. Once you hit submit, it'll send the json over to the server. I've gotten that far.

My question is, once I've created the new user row in my db, I want to send back that row to the client so I can immediately prepend it to my currently displayed table of users.

I've done this in a previous project via jQuery quite easily, but it was a bit less encapsulated than I'd like.

So once my user creation app (CreateUser) completes and receives data from the server, how would I push or bind that information to my user viewing table (ViewUsers) app? I'd rather keep them separate so I can drop them in widget-style without requiring them both each time.

Here's my first app code:

function CreateUsers($scope, $http){
    $scope.selectedType = '';
    $scope.formData = {};
    $scope.method = 'POST';
    $scope.url = '/createUser';
    $scope.types = [
        'Student',
        'Parent',
        'Teacher',
        'Staff'
    ];

    $scope.fields = {
        User:[
            {name: 'First Name', value: 'first_name'},
            {name: 'Last Name', value: 'last_name'},
            {name: 'Email', value: 'email'},
            {name: 'Phone', value: 'phone'}
        ],
        Employee:[
            {name: 'Start Date', value:'start_date'},
            {name: 'Branch', value:'branch'}
        ]
    };
    $scope.fields.Student = $scope.fields.User;
    $scope.fields.Parent = $scope.fields.User;
    $scope.fields.Employee = $scope.fields.User.concat($scope.fields.Employee);
    $scope.fields.Teacher = $scope.fields.Employee;
    $scope.fields.Staff = $scope.fields.Employee;


    $scope.createNewUser = function(){
        this.formData.type = this.selectedType;
        console.log($scope);
        console.log($scope.formData);

        $http({
            method: $scope.method,
            url:    $scope.url,
            data:   $scope.formData
        }).success(function(data,status){
            $scope.status = status;
            $scope.data = data; 
            console.log($scope);
        }).error(function(data,status){
            $scope.data = data || 'Request failed';
            $scope.status = status;
            console.log($scope);
        });
    }
}

Thanks a lot for reading.

Answer 1

Subscribe your first app to $rootScope:

function CreateUsers($scope, $http, $rootScope){
//...
}

and in your $http success handler add:

$rootScope.$broadcast("userCreated", user);

where user is the data you'd like to add to your users array, and then in your second app add a listener to that event:

$scope.$on("userCreated", function(e, user){
    //push the info to your users array here.
});

That should work for what you're describing.