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'
      }
    }
  })

@loganIonic

use $scope.apply to update your dom
try like this

$scope.apply(function(){
 $scope.data.mqttMessage=parsed;

});

I changed the code as you suggested.
But not working and console said …

Uncaught TypeError: $scope.apply is not a function

.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;

     $scope.apply(function(){

        $scope.data.mqttMessage=parsed;     // 

    });

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

  });


})

Great Thank you for your help

It was $scope.$apply() for working.

Hi loganIonic,

can you pls help me using mqtt in my app?
I used the MQTT Javascript Paho Client and it works perfectly but I don’t want to use Websocket’s in my own local Broker. Now I am searching another MQTT solution and found your post. I’ve tried your way but I get the following Error: “ReferenceError: ‘require’ is undefined” and have no Idea how to solve this.

Can you please please tell me how you implement the MQTT-Client?

Thanks a lot.
Kind regards

Patrizia