Want to add and subtract items from $scope array

Question

I am using $scope.exchange to send data to an ng3 chart. I want the chart to add a new value and delete the oldest value. So I never have more than 3 points. It currently adds 3 points every second but never removes any. If I change the line with slice to $scope.exchange = [], the chart will draw the first 3 and never update again. If I use the while loop that is commented out, then the chart re-draws everything every second. This flashes the screen and looks ugly. What can I do?

(function(){
var app = angular.module('exchange-directives', []);

app.directive('tableRows', function() {
    return {
        restrict: 'E',
        templateUrl: "js/directives/tableRow.html",
        scope:'=',
        link: function(scope, elements, attrs){
        },
        controller: ['$http', '$timeout', '$scope', function($http, $timeout, $scope) {
          var table = this;
            table.rows = [];
            var count = 0;
            var retrieveItems = function() {
                if($scope.exchange.length != 0) $scope.exchange.slice(3);
                //while($scope.exchange.length){
                //  $scope.exchange.pop();
                //}
                $http.get('/dashboard/history').success(function(data){//change back to '/dashboard/rates' when aws goes back online
                    table.rows = data;
                    for (i = 0; i < 3; i++){
                        var vals  = {
                            x: count++, 
                            dates: data.dates[i],
                            rates: data.rates[i]
                  }
                        $scope.exchange.push(vals);
                    }
                    $timeout(retrieveItems, 1000);
            });
            }
            retrieveItems();

        }],
        controllerAs: "table", 
    };
});
})();

Answer 1

It'd be easier with a fiddle, but here's what I think you want. First off, I'd "unshift" this new info instead of "pushing" it. It looks to me like you're currently adding the data to the end, then deleting that same data. Then I'd pop() the end item, instead of assuming that the object has 3 items. Next, I'd pass in the number of items you want to load. I'm not sure how the table.rows array is being used, but I'd guess you want to unshift that as well.

var retrieveItems = function(num) {
    num = num || 1;
    if($scope.exchange.length != 0) $scope.exchange.pop();

    $http.get('/dashboard/history').success(function(data){
        table.rows.unshift(data);
        for (i = 0; i < num; i++){
            var vals  = {
                x: count++, 
                dates: data.dates[i],
                rates: data.rates[i]
            }
            $scope.exchange.unshift(vals);
        }
        $timeout(retrieveItems, 1000);
    });
}
retrieveItems(3);

Hope this helps.

Answer 2

@Shashank was on the right track everything was creating a new object that the rest of my code could not accept. pop() just mutates the current array and therefore is accepted by all parts of the code. So I had to do

this.setHistory = function(input) {
    while($scope.exchange.length){
    $scope.exchange.pop();
    }
    $scope.history = input;
    startup(input, $scope.historyData);
};