title: Charts Js and Angular JS not working, Charts not being shown
body: <p>I am a noob to AngularJs and have never used charts JS before, and am encountering this problem as no charts are being shown. I would appreciate some help. Thank You!</p>
  
  <pre><code>&lt;h1 class="text-center"&gt;Histogram&lt;/h1&gt;
  
  &lt;canvas id="myChart" width="300" height="300"&gt;&lt;/canvas&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"&gt;&lt;/script&gt;
  &lt;a ng-click = "vm.edit"&gt;Show&lt;/a&gt;
  
  angular
  .module('histogram-test')
  .controller("histoCnt", function ($state, $scope, $rootScope) {
      console.log("Contrller working");
      var vm = this;
      vm.edit = edit;
      $scope.chart = angular.element(document.getElementById("myChart"));
  
      function edit() {
          var myChart = new Chart($scope.chart, {
              type: 'bar',
              data: {
                  labels: ["M", "T", "W", "R", "F", "S", "S"],
                  datasets: [{
                      label: 'apples',
                      data: [12, 19, 3, 17, 28, 24, 7]
                          }, {
                      label: 'oranges',
                      data: [30, 29, 5, 5, 20, 3, 10]
                          }]
              }
          });
      };
  });
  </code></pre>