title: Angular variable not binding to view
body: <p>I have an Angular/Onsen app that has an image which is put into a <a href="http://www.w3schools.com/html/html5_canvas.asp" rel="nofollow">HTML5 canvas tag</a>, and I am picking the color of the pixel I am on on <code>hover</code>. </p>
  
  <p>The view is pretty simple:</p>
  
  <pre><code>  &lt;ons-template id="live.html"&gt;
      &lt;ons-page ng-controller="LiveController"&gt;
        &lt;ons-toolbar&gt;
          &lt;div class="left"&gt;
            &lt;ons-toolbar-button ng-click="menu.toggle()"&gt;
              &lt;ons-icon icon="ion-navicon" size="28px" fixed-width="false"&gt;&lt;/ons-icon&gt;
            &lt;/ons-toolbar-button&gt;
          &lt;/div&gt;
          &lt;div class="center"&gt;Live Camera&lt;/div&gt;
        &lt;/ons-toolbar&gt;
  
  
  
        &lt;canvas id="canvas" width="100" height="100"&gt;&lt;/canvas&gt;
  
        &lt;p&gt;#{{hex}}&lt;/p&gt;
  
      &lt;/ons-page&gt;
    &lt;/ons-template&gt;
  </code></pre>
  
  <p>You can see there that the <code>&lt;p&gt;</code> tag should be displaying the value of <code>$scope.hex</code> (the calculated hex value of the pixels rgb channels) but it is not. Even though the correct value is logging from my controller.</p>
  
  <p>Here's my <strong>Controller</strong>:</p>
  
  <pre><code>  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 &amp;&amp; mousePos !== null &amp;&amp; mousePos.x &gt; padding &amp;&amp; mousePos.x &lt; padding + imageObj.width &amp;&amp; mousePos.y &gt; padding &amp;&amp; mousePos.y &lt; 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 is ' + 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;
        }
  
    });
  </code></pre>
  
  <p>The important part starts after the <code>mousemove</code> event listener. I got the RGB values fine and converted them to Hexadecimal. This all logs fine - the RGB and HEX. But <code>$scope.hex</code> never seems to bind/update the View. Please advise what is going wrong.</p>