title: Change axis label in real-time on NVD3 chart using angular
body: <p>I am sure that this answer must be obvious, but I can't seem to find the answer anywhere.  I have a chart which I am generating using krispo's <a href="http://krispo.github.io/angular-nvd3/#/" rel="nofollow">angular-nvd3</a> which displays data in real-time (similar to the real-time example found <a href="http://krispo.github.io/angular-nvd3/#/quickstart" rel="nofollow">here</a>).  In my application, I use a right-click context menu to change the data set that is currently on display.  Thus far, it works very well.  However, I am not sure how to update the axis label so that it properly indicates the data that is being displayed.  The code for the controller is as follows:</p>
  
  <pre><code>(function() {
     angular.module('main').controller('mainPasCtlr', ['$scope', 'Data', 
                                       function($scope, Data) {
  
          var index = 0;
          var labels = ['Q','IA','f0', 'abs'];
  
          $scope.menuOptions =[['Q', function(){index = 0;}],
                               ['IA', function(){index = 1;}],
                               ['f0', function(){index = 2;}],
                               ['abs', function(){index = 3;}]];
  
          $scope.options = {
              chart : {type : 'lineChart',
                       height : 180,
                       margin : { top : 20,
                                  right : 20,
                                  bottom : 40,
                                  left : 75
                       },
              x : function(d) {
                      return d.x;
                  },
              y : function(d) {
                      return d.y;
                  },
              useInteractiveGuideline : true,
  
              transitionDuration : 0,
              yAxis : { showMaxMin: false,
                        axisLabel: labels[index],
                        tickFormat : function(d) {return d3.format('.02f')(d); }
                      },
              xAxis : { axisLabel: 'Time',
                        tickFormat : function(d) { return d3.time.format('%X'(new Date(d)); }
                      }
             },
             title: { enable: false,
                      text: labels[index] + ' vs Time'
                    }
         };
  
         $scope.data = [ { values : [], key : 'Cell 1 '},
                         { values : [], key : 'Cell 2 '},
                         { values : [], key : 'Cell 3 '},
                         { values : [], key : 'Cell 4 '},
                         { values : [], key : 'Cell 5 '},
                        ];
  
         $scope.run = true;
  
         $scope.$on('dataAvailable', function() {
  
             for (var i = 0; i &lt; 5; i++) {
                 $scope.data[i].values = Data.pas.cell[i][labels[index]];
             }
  
          });
  
      }]);
  })();
  </code></pre>
  
  <p>Is there some refresh function that I am missing that will redraw the entire plot?</p>
  
  <p>Thanks, Matt</p>