jvmvik/app.js

## app.js
/**
 * Created by victor on 1/19/14.
 */
var app = angular.module('app', []);

app.factory('ChatService', function () {
    var service = {};

    service.connect = function ()
    {
        if (service.ws)
        {
            return;
        }

        // Bind to your back end
        var ws = new WebSocket("ws://localhost:8181/ws");

        ws.onopen = function ()
        {
            console.log("Succeeded to open a connection");
            service.callback({status:"ok", msg: "Succeeded to open a connection..."});
        };

        ws.onerror = function ()
        {
            console.log("Failed to open a connection")
            service.callback({status:"ok", msg:"Failed to open a connection..."});
        }

        ws.onmessage = function (message)
        {
            var j = JSON.parse(message.data);
            service.callback(j);
        };

        service.ws = ws;
    }

    service.send = function (message)
    {
        var j = {topic: "chat", msg: message}
        service.ws.send(JSON.stringify(j));
    }

    service.subscribe = function (callback)
    {
        service.callback = callback;
    }

    return service;
});


function AppCtrl($scope, ChatService)
{
    $scope.messages = [];

    ChatService.subscribe(function (json)
    {
       // var json = JSON.parse(text);
        if(json.status == "fail")
        {
            alert("Error: " + JSON.stringify(json));
            return;
        }
        $scope.messages.push(json.msg);
        $scope.$apply();
    });

    $scope.connect = function ()
    {
        ChatService.connect();
        $scope.isOnline = "btn-success";
    }

    $scope.isOnline = "btn-primary";

    $scope.send = function ()
    {
        ChatService.send($scope.text);
        $scope.text = "";
    }
}

## index.html
<html ng-app="app">
<head>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
    <script src="app.js"></script>

    <style>
        body { margin-top: 10px; }
        input.message { height: 30px; }
    </style>
</head>

<body ng-controller="AppCtrl">
<form class="form-inline">
    <button ng-click="connect()" class="btn" ng-class="isOnline">Connect</button>
    <input type="text" ng-model="text" placeholder="input message to send" class="message"/>
    <button ng-click="send()" class="btn">Send</button>
</form>

<table class="table table-striped">
    <tr ng-repeat="message in messages">
        <td>{{message}}</td>
    </tr>
</table>
</body>
</html>
	/**
	* Created by victor on 1/19/14.
	*/
	var app = angular.module('app', []);

	app.factory('ChatService', function () {
	var service = {};

	service.connect = function ()
	{
	if (service.ws)
	{
	return;
	}

	// Bind to your back end
	var ws = new WebSocket("ws://localhost:8181/ws");

	ws.onopen = function ()
	{
	console.log("Succeeded to open a connection");
	service.callback({status:"ok", msg: "Succeeded to open a connection..."});
	};

	ws.onerror = function ()
	{
	console.log("Failed to open a connection")
	service.callback({status:"ok", msg:"Failed to open a connection..."});
	}

	ws.onmessage = function (message)
	{
	var j = JSON.parse(message.data);
	service.callback(j);
	};

	service.ws = ws;
	}

	service.send = function (message)
	{
	var j = {topic: "chat", msg: message}
	service.ws.send(JSON.stringify(j));
	}

	service.subscribe = function (callback)
	{
	service.callback = callback;
	}

	return service;
	});


	function AppCtrl($scope, ChatService)
	{
	$scope.messages = [];

	ChatService.subscribe(function (json)
	{
	// var json = JSON.parse(text);
	if(json.status == "fail")
	{
	alert("Error: " + JSON.stringify(json));
	return;
	}
	$scope.messages.push(json.msg);
	$scope.$apply();
	});

	$scope.connect = function ()
	{
	ChatService.connect();
	$scope.isOnline = "btn-success";
	}

	$scope.isOnline = "btn-primary";

	$scope.send = function ()
	{
	ChatService.send($scope.text);
	$scope.text = "";
	}
	}
	<html ng-app="app">
	<head>
	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
	<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
	<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">

	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
	<script src="app.js"></script>

	<style>
	body { margin-top: 10px; }
	input.message { height: 30px; }
	</style>
	</head>

	<body ng-controller="AppCtrl">
	<form class="form-inline">
	<button ng-click="connect()" class="btn" ng-class="isOnline">Connect</button>
	<input type="text" ng-model="text" placeholder="input message to send" class="message"/>
	<button ng-click="send()" class="btn">Send</button>
	</form>

	<table class="table table-striped">
	<tr ng-repeat="message in messages">
	<td>{{message}}</td>
	</tr>
	</table>
	</body>
	</html>