Help me for data binding

Hi, I'm testing ionic for my app. My simple test is .. When MQTT data arrived periodically, the data on html page should be changed without user's page refreshing or reload. Data arrived every 1sec.
My problem is the view data is not changed even though console logging is updated.
I cannot find how to fix this.

Contorller is

.controller('MqttCtrl', function($scope, $stateParams) {

  $scope.data = {
    'mqttTopic' : '',
    'mqttMessage':''
  };


  var mqtt = require('mqtt');
  var client=mqtt.connect('ws://172.16.100.103:3333');

  client.on('connect', function(){

    client.subscribe('ionic/logan');

    client.on('message', function(topic, message) {
      var parsed=JSON.parse(message);

     $scope.data.mqttTopic=topic;
     $scope.data.mqttMessage=parsed;

     console.log($scope.data.mqttTopic);  //   well working
     console.log($scope.data.mqttMessage); //
    });

  });


})

And HTML is

 <ion-view view-title="Browse">
   <ion-content  >

    {{data.mqttTopic}} ~ {{data.mqttMessage}}     <!-- not updated -->

    </ion-content>
  </ion-view>

app.js is

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

  .state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "templates/menu.html",
    controller: 'AppCtrl'
  })

  .state('app.search', {
    url: "/search",
    views: {
      'tab-search': {
        templateUrl: "templates/search.html"
      }
    }
  })

  .state('app.browse', {
    url: "/browse",
    views: {
      'tab-browse': {
        templateUrl: "templates/browse.html",
        controller: 'MqttCtrl'
      }
    }
  })