Angular 1.5 Two-Way Binding

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.0-alpha8/angular-chart.js"></script>
<div ng-app="myApp" ng-controller="mainController">
  Search Names:
  <input type="text" ng-model="search">
  <ol>
    <li ng-repeat="datas in collection | filter:search track by $index">{{datas}}</li>
  </ol>
  <form ng-submit="addName()">
    <input type="text" ng-model="names" placeholder="Enter name" required>
    <input type="text" ng-model="number" placeholder="Enter number for chart" required>
    <input type="submit" value="Submit">
  </form>

  <canvas id="averageDistance" class="chart chart-line" chart-data="data" chart-labels="labels" chart-series="series" chart-options="options" chart-dataset-override="datasetOverride" chart-click="onClick">
  </canvas>
</div>

JavaScript

var app = angular.module('myApp', ["chart.js"]);

app.controller('mainController', function($scope) {
  $scope.labels = ["Red", "Blue", "Yellow", "Green"];
  $scope.data = [
    [12, 19, 3, 5, 12]
   
  ];
  $scope.onClick = function(points, evt) {
    console.log(points, evt);
  };
  $scope.datasetOverride = [{
    yAxisID: 'y-axis-1'
  }];
  $scope.options = {
    scales: {
      yAxes: [{
        id: 'y-axis-1',
        type: 'linear',
        display: true,
        position: 'left'
      }] 
    }
  };
   $scope.addName = function() {
       $scope.labels.push($scope.names);
       $scope.data.push(parseInt($scope.number));
   }
});