javascript - Angular variable not binding to view -

i have angular/onsen app has image put html5 canvas tag, , picking color of pixel on on hover.

the view pretty simple:

  <ons-template id="live.html">     <ons-page ng-controller="livecontroller">       <ons-toolbar>         <div class="left">           <ons-toolbar-button ng-click="menu.toggle()">             <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>           </ons-toolbar-button>         </div>         <div class="center">live camera</div>       </ons-toolbar>          <canvas id="canvas" width="100" height="100"></canvas>        <p>#{{hex}}</p>      </ons-page>   </ons-template> 

you can see there <p> tag should displaying value of $scope.hex (the calculated hex value of pixels rgb channels) not. though correct value logging controller.

here's controller:

  module.controller('livecontroller', function($scope, $data) {        $scope.hex = '00ffff';       var picturesource;       var destinationtype;        document.addeventlistener("deviceready", ondeviceready, true);        function ondeviceready() {         console.log('ondeviceready');         picturesource = navigator.camera.picturesourcetype;         destinationtype = navigator.camera.destinationtype;         capturephoto();        }        function capturephoto() {         console.log('capturephoto');         navigator.camera.getpicture(onsuccess, onfail, {           quality: 50,           destinationtype: destinationtype.data_url         });       }        function onsuccess(imagedata) {         console.log('onsuccess');         var largeimage = document.getelementbyid('largeimage');         largeimage.style.display = 'block';         largeimage.src = "data:image/jpeg;base64," + imagedata;         setupimage(imagedata);       }        function onfail(message) {         console.log('failed because: ' + message);       }        function getmousepos(canvas, evt) {         var rect = canvas.getboundingclientrect();         return {           x: evt.clientx - rect.left,           y: evt.clienty - rect.top         };       }        function init(imageobj) {         console.log('init');          var padding = 10;         var mousedown = false;          var canvas = document.getelementbyid('canvas');         var context = canvas.getcontext('2d');         context.strokestyle = '#444';         context.linewidth = 2;         context.canvas.width  = window.innerwidth;         context.canvas.height = window.innerwidth;          canvas.addeventlistener('mousedown', function() {           mousedown = true;         }, false);          canvas.addeventlistener('mouseup', function() {           mousedown = false;         }, false);          canvas.addeventlistener('mousemove', function(evt) {           console.log('mousemove');            var mousepos = getmousepos(canvas, evt);           var color = undefined;            if (mousedown && mousepos !== null && mousepos.x > padding && mousepos.x < padding + imageobj.width && mousepos.y > padding && mousepos.y < padding + imageobj.height) {             var imagedata = context.getimagedata(padding, padding, imageobj.width, imageobj.width);             var data = imagedata.data;             var x = mousepos.x - padding;             var y = mousepos.y - padding;             var red = data[((imageobj.width * y) + x) * 4];             var green = data[((imageobj.width * y) + x) * 4 + 1];             var blue = data[((imageobj.width * y) + x) * 4 + 2];             var color = 'rgb(' + red + ',' + green + ',' + blue + ')';             console.log('picked color ' + color);             updatecolor(red, green, blue);           }         }, false);          context.drawimage(imageobj, padding, padding);       }        function updatecolor(r, g, b) {         $scope.hex = rgbtohex(r, g, b);         console.log($scope.hex);       }        function rgbtohex(r, g, b) {         return tohex(r) + tohex(g) + tohex(b)       }        function tohex(n) {         n = parseint(n, 10);         if (isnan(n)) {           return "00";         }         n = math.max(0, math.min(n, 255));         return "0123456789abcdef".charat((n - n % 16) / 16) + "0123456789abcdef".charat(n % 16);       }        function setupimage(_data) {         console.log('setupimage');          var imageobj = new image();         imageobj.onload = function() {           init(this);         };         imageobj.src = "data:image/jpeg;base64," + _data;       }    }); 

the important part starts after mousemove event listener. got rgb values fine , converted them hexadecimal. logs fine - rgb , hex. $scope.hex never seems bind/update view. please advise going wrong.

try editing updatecolor() function below.

function updatecolor(r, g, b) {   $scope.hex = rgbtohex(r, g, b);   console.log($scope.hex);   $scope.$apply(); } 

this should work. problem you're having you're updating value of hex angular isn't recognizing change. $scope.$apply() should force binding update hence fixing problem.