title: Click event using Chart.js with AngularJS
body: <p>Hi I can draw a line chart with Chart.js adding some data set. </p>
  
  <pre class="lang-html prettyprint-override"><code>       &lt;div class="row"&gt;
            &lt;div class="col-md-9" id="line-chart" ng-controller="LineCtrl"&gt;
              &lt;div class="panel panel-default" &gt;
                &lt;select ng-model="selec"&gt;
                  &lt;option value="aapl"&gt;AAPL(Apple)&lt;/option&gt;
                  &lt;option value="goog"&gt;GOOG(Google)&lt;/option&gt;
                  &lt;option value="amzn"&gt;AMZN(Amazon)&lt;/option&gt;
                &lt;/select&gt;
                &lt;div class="panel-body"&gt;
                  &lt;canvas id="line" class="chart chart-line chart-xl" data="data" labels="labels" legend="true"
                  click="onClick()" series="series"&gt;&lt;/canvas&gt;
                &lt;/div&gt;
              &lt;/div&gt; 
            &lt;/div&gt;
  
            &lt;div class="col-md-3" id="txtfield" ng-controller="LineCtrl"&gt;
              &lt;form class="form-horizontal" role="form"&gt;
               &lt;div class="form-group"&gt;
                &lt;label for="dates" class="col-sm-7 control-label"&gt;Date&lt;/label&gt;
                &lt;div class="col-sm-5"&gt;
                 &lt;input type="text" class="form-control" id="dates" ng-model="selecDate"
                 placeholder="  "  readonly&gt;
               &lt;/div&gt;
  </code></pre>
  
  <p>and this is data set in Json file. </p>
  
  <pre class="lang-js prettyprint-override"><code>[
    {
      "date":"2011-06-29",
      "numOfTweet":4,
      "oldScore":5,
      "newScore":4,
      "percentage1":74.64788732,
      "appleClosePrice":45.01,
      "percentage2":-18.81363435
    },
    {
      "date":"2011-06-30",
      "numOfTweet":1,
      "oldScore":2,
      "newScore":1,
      "percentage1":-55.2238806,
      "appleClosePrice":45.23,
      "percentage2":24.43901355
    },
  </code></pre>
  
  <p>If I move the cursor on the graph it shows a tooltip involving the label(date) and point(data). </p>
  
  <p>I wanna make that if I click the point of graph in the day the data will be shown in a textfields I already made (numOfTweet, scores, percentages and so on) as well. How can I show it manipulating controller.js or somewhere else?</p>
  
  <p>my controller.js looks like</p>
  
  <pre class="lang-js prettyprint-override"><code>app.controller('LineCtrl', ['$scope', '$http', function($scope, $http) {
    $http.get('stock/aapl.json').success(function(data) {
          $scope.selec = 'aapl'; //default as age
          $scope.series = ['Tweet Mood', 'Stock Market'];
          $scope.stocks = data;
  
          $scope.labels = [];
          $scope.createLabels = function() {
            for (var i = 0; i &lt; $scope.stocks.length; i++) {
              $scope.labels.push($scope.stocks[i].date);
            }
          };  
          $scope.createLabels();
  
          $scope.data = [[], []];
          $scope.createGraphArray = function() {  
            for (var i = 0; i &lt; $scope.stocks.length; i++) {
              $scope.data[0].push($scope.stocks[i].percentage1);
              $scope.data[1].push($scope.stocks[i].percentage2);
            }
          };
          $scope.createGraphArray();
  
          $scope.clickPredic = function() {  
            $scope.buySell = 'clicked';
          }; //button click test
  
          $scope.onClick = function (points, evt) {
            console.log(points, evt);
          };
  
          $scope.onHover = function (points) {
            if (points.length &gt; 0) {
              console.log('Point', points[0].value);
            } else {
              console.log('No point');
            }
          };
      });
  }]);
  </code></pre>
  
  <p>Chart.js is available in <a href="https://github.com/nnnick/Chart.js/blob/master/Chart.js" rel="nofollow">https://github.com/nnnick/Chart.js/blob/master/Chart.js</a>
  Thanks in advance!</p>