gistfile1.js

angular
    .module('app')
    .service('xmpp', function($rootScope, $state) {

        return {

            auth: function(jid, sid, rid) {

                // I am using attach instead of connect so you don't need any jid, sid or rid

                connect = new Strophe.Connection('http://site.com/http-bind');

                connect.attach(jid, sid, rid, function(status) {

                    if (status === Strophe.Status.ATTACHED) {

                        //add "Hooks", or Listeners if you will
                        
                        connect.addHandler(on_presence, null, "presence");
                        connect.addHandler(on_message, null, "message", "chat");

                        connect.send($pres());

                        $state.go('contacts')

                    } else if (status === Strophe.Status.AUTHENTICATING) {
                        console.log("AUTHENTICATING");
                    } else if (status === Strophe.Status.AUTHFAIL) {
                        console.log("AUTHFAIL");
                    } else if (status === Strophe.Status.CONNECTING) {
                        console.log("CONNECTING");
                    } else if (status === Strophe.Status.DISCONNECTED) {
                        console.log("DISCONNECTED");
                    }

                });

                // "Hooks"

                function on_presence(presence) {

                        // handle presence

                        return true

                    } // end of presence

                function on_message(message) {

                        // handle incoming messages
                        // I have an array $rootScope.messages which is available throghout the whole app.
                        // e.g. $rootScope.messages.push(message);

                        return true

                    } // end of on_messsage

            }
        }

    });