title: Angular chartjs directive
body: <p>I want to use this angularJS directive for chartjs
  <a href="http://earlonrails.github.io/angular-chartjs-directive/" rel="nofollow">http://earlonrails.github.io/angular-chartjs-directive/</a></p>
  
  <p>The only issue is that it uses the HTML5 element chart:</p>
  
  <pre><code> &lt;chart value="myChart"&gt;&lt;/chart&gt;
  </code></pre>
  
  <p>Is it possible to convert this to a directive and use it as follows? So instead of a  object, we use it as an attribute of a div.</p>
  
  <pre><code>&lt;div chart-use="myChart" /&gt;
  </code></pre>
  
  <p>Update:</p>
  
  <p>I revised the code on chart-js directive as follows:</p>
  
  <pre><code>angular.module('chartjs-directive', []).
  directive('div-chart', function () {
  var baseWidth = 600;
  var baseHeight = 400;
  
  return {
    restrict: 'A',
    template: '&lt;canvas&gt;&lt;/canvas&gt;',
    scope: {
      //chartObject: "=value"
    },
   ..............
   ............
      });
  </code></pre>
  
  <p>and UI like this:</p>
  
  <pre><code>  &lt;!--&lt;chart value="myChart" id="myCoolChart"&gt;&lt;/chart&gt;--&gt;
    &lt;div id="myColChart" div-chart&gt;&lt;/div&gt;
  </code></pre>
  
  <p>But this is not working. I assume it's because of this:</p>
  
  <pre><code> $scope.myChart.data = data;
  </code></pre>
  
  <p>But I'm not sure how to fix it.</p>