Handling data streaming using ng-repeat

Question

I got the following data which comes out of a EventSource interface. I'm using this data to build a simple table (i have specified the table structure below) using angular ng-repeat. The issue i have is since the data changes rapidly i.e. server would be sending the changes continuously for the requested symbol and then it would keep upon updating the values. I want to add a row when data's are requested for a symbol and then should update the same row for the new values. This is pretty easy and is working.

But the real challenge is (atleast for me) when i request another symbol i want that to be added to a new second row and from now on it should update the values in both rows. It goes on as we request new symbols. With the following data structure is this possible, if so please explain.

Data Structure:

data = [
  AMZN: {
    name: Amazon,
    symbol: AMZN,
    openPrice: $100,
    latestPrice: $200,
    percentage: 0.1
 },
 FB: {
    name: Facebook,
    symbol: FB,
    openPrice: $150,
    latestPrice: $250,
    percentage: 0.2
 }
]

Table Structure:

<table>
        <thead>
            <tr>
                <th>Session ID</th>
                <th>Company Name</th>
                <th>Symbol</th>
                <th>Open Price</th>
                <th>Latest Price</th>
                <th>Percentage</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="stockVal in data">
                <td>[Empty]</td>
                <td>{{stockVal.companyName}}</td>
                <td>{{stockVal.companySymbol}}</td>
                <td>{{stockVal.openPrice}}</td>
                <td>{{stockVal.latestPrice}}</td>
                <td>{{stockVal.percentage}}</td>
            </tr>
        </tbody>
    </table>

What happens now is when i do a request for AMZN the tables populates the values pertaining to Amazon and then if i request for FB it replace the values in the same row... i.e. both FB and AMZN gets replaces in the same row. Bottom line is i want FB values to be populated in new row.

Controller code:

All it does is making a request for the end point with window.EventSource and grab the data and attach it to the scope object. To avoid populating n number of rows the data array is flushed each time like making the length to 0.

Adding controller code below,

$scope.generateData = _generateData;

function generateData() {

endPoint = '/getData'
$scope.symbols = window.document.getElementById('symbols').value;
var eventSource = new window.EventSource(endPoint + '?&s=' + $scope.symbols); 

eventSource.onmessage = function(e) {

    var data = null;
    try {
       data =  JSON.parse(e.data);
    } catch (err){

    }

    if(data) {

      $scope.$apply(function () {
        $scope.companyName = data.name;
        $scope.companySymbol = data.symbol;
        $scope.openPrice = data.openPrice;
        $scope.latestPrice = data.latestPrice;
        $scope.percentage = data.percentage;
      });

      var specData = {
        [$scope.companySymbol]: {
          name: $scope.companyName,
          symbol: $scope.companySymbol,
          openPrice: $scope.openPrice,
          latestPrice: $scope.latestPrice,
          percentage: $scope.percentage
        }
      }

      $scope.data[0] = specData[$scope.companySymbol];

    }

 }

};