AngularJs add time slider to chart.js barchart

I would like to add a time range slider to a barchart. The barchart plots the column key in the x axis and the number of times it was found in the data on the y-axis. The barchart does not have the time data plotted on the barchart but the timestamp is available in the json data. The typical timescale sliders found adjust the timescale that is already plotted on the x-axis, but this won’t work for this situation.

Html:

    HTML:
    <!doctype html>
    <html ng-app="app">
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
        <!-- <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-resource.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-route.js"></script> -->
        <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
        <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
        <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
        <script src="http://ui-grid.info/release/ui-grid.js"></script>
        <script src="http://ui-grid.info/release/ui-grid.css"></script>
        <script src="node_modules/angular-chart.js/node_modules/chart.js/dist/Chart.min.js"></script>
        <script src="node_modules/angular-chart.js/dist/angular-chart.min.js"></script>
        <script src="node_modules/angular-filter/dist/angular-filter.min.js"></script>
        <!-- <script src="/js/app.js"></script>
        <link rel="stylesheet" target="_blank" rel="nofollow" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
        <link rel="stylesheet" target="_blank" rel="nofollow" href="/css/main.css" type="text/css">
        <!-- <link rel="stylesheet" target="_blank" rel="nofollow" href="/webjars/bootstrap/3.3.6/css/bootstrap.css"> -->
    </head>
      <body>
    <div ng-controller="myController">

          <div><canvas id="bar" class="chart chart-bar"chart-data="key" chart-labels="value" chart-series="series"></canvas></div>
    </body>
    </html>

Javascript:

     var app = angular.module('app',['ngTouch', 'ui.grid', 'chart.js', 'angular.filter']);
        app.controller('myController',['$scope', '$http','$filter', 'countByFilter',function($scope, $http, $filter, countByFilter) {

         $scope.barData = [];
         $scope.labels = [];
         $scope.myData = [{"col_ky":"75421","crt_ts":1501365031000},{"col_ky":"75421","crt_ts":1501124681000},{"col_ky":"75421","crt_ts":1501124688000},{"col_ky":"880610","crt_ts":1501127589000},{"col_ky":"880610","crt_ts":1501127715000},{"col_ky":"891733","crt_ts":1501128075000},{"col_ky":"75421","crt_ts":1501128130000},{"col_ky":"880610","crt_ts":1501128181000},{"col_ky":"75421","crt_ts":1501128192000},{"col_ky":"885110","crt_ts":1501128364000},{"col_ky":"880610","crt_ts":1501128369000},{"col_ky":"326083","crt_ts":1501130957000},{"col_ky":"75421","crt_ts":1501131142000},{"col_ky":"863184","crt_ts":1501131949000}];


        }]);

        //use angular-filter library: countBy function to group the data into number of hits per conditionID
        $scope.countBy = countByFilter($scope.myData,'col_ky');



        //put dates into proper display format 
        angular.forEach($scope.myData, function(value) {
        value.crt_ts = $filter('date')(value.crt_ts, "dd/MM/yyyy HH:mm:ss");
                    })

        //put grouped data into bar-chart
        angular.forEach($scope.countBy, function(key, value) {
                        $scope.labels.push(value);
                        $scope.barData.push(key);
                    })