<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>Data tables</title>
  <link rel="stylesheet" href="../dist/angular-chart.css">
  <link href="bootstrap.css" rel="stylesheet">
</head>
<body ng-app="examples">
<div class="container"></div>
<div id="container" class="container">
  <div class="row" ng-controller="DataTablesCtrl">
    <div class="col-lg-6 col-sm-12">
      <div class="panel panel-default">
        <div class="panel-heading">Chart Data</div>
        <div class="panel-body">
          <table class="table table-responsive table-condensed">
            <tr>
              <th ng-repeat="label in labels">{{label}}</th>
            </tr>
            <tr ng-repeat="dataSet in data">
              <td ng-repeat="set in dataSet track by $index"><span style="text-align: right;">{{data[$parent.$index][$index]}}</span></td>
            </tr>
          </table>
          <input ng-click="randomize()" value="Randomize" type="button" class="pull-right"/>
        </div>
      </div>
    </div>
    <div class="col-lg-6 col-sm-12">
      <div class="panel panel-default">
        <div class="panel-heading">Reactive Chart</div>
        <div class="panel-body">
          <canvas id="tables" class="chart chart-line" data="data" labels="labels"></canvas>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="../bower_components/Chart.js/Chart.min.js"></script>
<script src="../angular-chart.js"></script>
<script src="app.js"></script>
</body>
</html>
