title: How to Redraw Tables using Angular UI Tabs and UI Grid?
body: <p>I'm trying to migrate from jQuery Data Tables to Angular UI. My app uses the <a href="https://dev.mysql.com/doc/world-setup/en/world-setup-installation.html" rel="nofollow noreferrer">MySQL World schema</a> and displays the data in 3 different tables. In jQuery, I'd 3 different pages, each launched from a home page. Here's a <a href="http://nameless-island-5362.herokuapp.com/helloworld" rel="nofollow noreferrer">live example</a>.
  In Angular, I created 3 tabs, clicking on each of which is supposed to reload the page with a new grid and populate it with data. Problem is, the grid gets displayed alright on page load with the content on the first tab. On clicking the other tabs, page goes empty and nothing is rendered. Now the data returned is not insignificant, sometimes around 4k rows. However, the problem isn't a latency issue as I've confirmed by waiting several minutes.</p>
  
  <p>I'm not a JS/CSS/HTML guy so most likely I'm missing something. That's why this question.</p>
  
  <p><strong>Edit:</strong>
  <a href="http://plnkr.co/edit/6VKTDbfQgdg9l94vFPfo?p=info" rel="nofollow noreferrer">Plnkr</a></p>
  
  <p>Following is the code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="selection-panel" class="selection-panel" ng-controller="HelloWorldCtrl"&gt;
      &lt;div&gt;
          &lt;uib-tabset type="pills" justified="true"&gt;
              &lt;uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}" select="update(tab.title)"&gt;
                  &lt;div id="data-panel" class="data-panel" ui-grid="gridOptions"&gt;&lt;/div&gt;
              &lt;/uib-tab&gt;
          &lt;/uib-tabset&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;script src="js/app.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>(function() {
      var app = angular.module('helloWorld', ['ui.bootstrap', 'ui.grid']);
  
      app.controller('HelloWorldCtrl', ['$http', '$scope', function ($http, $scope) {
          $scope.tabs = [
              { title: 'Countries' },
              { title: 'Cities' },
              { title: 'Languages' }
          ];
  
          $scope.gridOptions = {};
          $scope.gridOptions.data = [];
  
          $scope.gridOptionsCountries = {
              columnDefs: [
                  { name: 'code'},
                  { name: 'name'},
                  { name: 'continent'},
                  { name: 'region'},
                  { name: 'population'}
              ]
          };
  
          $scope.gridOptionsCities = {
              columnDefs: [
                  { name: 'id'},
                  { name: 'name'},
                  { name: 'country'},
                  { name: 'population'}
              ]
          };
  
          $scope.gridOptionsLanguages = {
              columnDefs: [
                  { name: 'country'},
                  { name: 'language'}
              ]
          };
  
          $scope.update = function(title) {
              if (title === "Countries") {
                  $scope.gridOptions = angular.copy($scope.gridOptionsCountries);
              } else if (title === "Cities") {
                  $scope.gridOptions = angular.copy($scope.gridOptionsCities);
              } else if (title === "Languages") {
                 $scope.gridOptions = angular.copy($scope.gridOptionsLanguages);
              }
  
              $http.get(title.toLowerCase()).success(function(data) {
                  $scope.gridOptions.data = data;
              });
          };
      }]);
  })();
  </code></pre>