HiveMQ Websockets JavaScript

Question

I am trying to recreate the web sockets enabled application using the tutorials available at

http://www.hivemq.com/build-javascript-mqtt-web-application/

with angular and bootstrap.

Here is my sample code:

client.onMessageArrived = function (message) {
    //Do something with the push message you received
    $log.info('Message arrived');

    //   $log.info(message.payloadString);

    $scope.tweet = message.payloadString;
    $log.info($scope.tweet);
};

here is my html code for textbox to which I am trying to populate the message.

<input type="type" name="input" value="none" ng-model="tweet" />

The problem is, in console on web browser I can see $log.info($scope.tweet) printing the published messages, but the textbox does not get populated. Why could this be happening? Thanks

Here is the complete code of controller

(function () { var HomeController = function ($scope, $log, $modal) {

    $scope.displayTick = false;

    var client = new Messaging.Client("broker.mqttdashboard.com", 8000, "myclientid_" + parseInt(Math.random() * 100, 10));

    client.onConnectionLost = function (responseObject) {

        $log.info('Connection Lost');
    };


    client.onMessageArrived = function (message) {

        $log.info('Message arrived');
        $log.info('msg:' + message.payloadString);

        $scope.tweet = message.payloadString;
        $log.info($scope.tweet);


    };


    var options = {
        timeout: 3,

        onSuccess: function ($scope) {

            $log.info('Connected to broker');

            client.subscribe('Event', { qos: 2 });

            $scope.displayTick = true;

            $log.info($scope.displayTick);
        },

        onFailure: function (message) {
            $log.info('Failed Connected to broker');
            alert("Connection failed: " + message.errorMessage);
        }
    };


    client.connect(options);
    client.subscribe('angular', { qos: 2 });

}; 

IotApp.controller("HomeController", HomeController);

}());