Why will a change on $scope.data on a onChange callback not re-plot chart.js?

Question

I have an application that is written around the MEAN web stack. I have created an API that depending upon the URL a JSON data set is returned for given weights. This is interconnected with my Mongo database. There are two returned JSON types, one for all weights and another for weights that fall between two dates. Not only am I displaying all of these weights in the first instance on one page(home/index), but I am also displaying by a filtered set(by date) on an independent page. This independent page utilizes both angular-chart.js and ngDaterangepicker. These are both Angular directives that are injected into my code.

When a date range is selected a ng-change function runs (change()) which grabs a new set of filtered data(by date). This data is then added back into $scope.data the property, which when changed, should theoretically cause the chart to re-plot. Unfortunately, my application is not watching for new changes to this property inside of a on-change function.

If a timeout is set outside of this function the graph will re-plot. So I am wondering if there is a better way or a different way to solve this problem.

According to the documentation from angular-chart if there is any change to the value of $scope.data the chart will re-plot the new values, however anything inside of an on change event listener/function will cause any new values set to $scope.data to not be bound and cause the graph not to replot the new values. Why is the ng-change directive so special? Below is my HTML and JavaScript.

=== HTML View ===

<div class="container-fluid">
<h1 class="text-center">Graphs</h1>
    <div class="container">
<div class="col-sm-12" ng-controller="weights">
    <input type="text" ng-change="change()" ng-model="model"/>
        <input type="daterange" ng-change="change({{myDateRange | json}})" ng-model="myDateRange" />
        {{myDateRange | json}}
        {{data}}
</div>
    <div class="col-sm-12">
    <div class="col-sm-2"></div>
    <div class="col-sm-8 center-block">
        <div ng-controller="weights">
    <canvas id="line" class="chart chart-line" chart-data="data"
  chart-labels="labels" chart-legend="true" chart-series="series"
  chart-click="onClick">
</canvas> 
</div>
</div>
<div class="col-sm-2"></div>
</div>
    </div>
</div>

=== Angular Controller ===

angular.module('app').controller('weights', ['$scope', 'weightsFactory','$filter','$http', '$timeout', function($scope, weightsFactory, $filter, $http, $timeout){
    //need to get weights from /weights
    //$scope.labels = [1, 2, 3, 4]; 
    $scope.series = ['Weights Over Time'];
    $http.get('/weights').success(function(data){ //all data
    var dates = []; 
    var weights = []; 
    $scope.weights = data; 
     angular.forEach(data, function(value, key){
        dates.push($filter('date')(value.date, 'MMM dd, yyyy - hh:m:ss a'));
        weights.push(value.weight);
     });    
    $scope.labels = dates; 
    $scope.data = [ weights ];
    });

$scope.change = function(data){
     //2016-04-08T04:00:00.000Z/2016-04-09T03:59:59.999Z
     var startTime = '2016-04-08T04:00:00.000Z'; 
     var endTime = '2016-04-09T03:59:59.999Z';
     $http.get('/weight/range/'+startTime+'/'+endTime).success(function(response){
        $timeout(function() {
            $scope.data = [['100', '200', '300']]; //this data is being set but is not causing a change on chart.js
        }, 10);
     });        
}

Answer 1

I wasted 50+ bounty on this question, however it is safe to assume that you can have the same controller in an application, however if you nest two controllers together then yes the application will work, however you will have essentially two different $scope variables in memory. I am not going to remove my error only to prove that if all else fails, look for identical controllers. Be careful with your HTML.