JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.angularjs.org/1.2.22/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<div ng-app='App'>
    <div ng-controller='Ctrl'>
        <div>
            <h4>Without tabs</h4>
            <div class="chart" chart="" ng-model='data'></div>
        </div>
        <br /><br />

        <ul class="nav nav-tabs" role="tablist">
          <li class="active"><a href="#plot" role="tab" data-toggle="tab">With Tabs</a></li>
        </ul>
        
        <div class="tab-content">
          <div class="tab-pane active" id="plot">
              <div class="chart" chart="" ng-model='data'></div>
          </div>
        </div>
    </div>
</div>

CSS

.chart {
    width:400px;
    height:200px;
}

JavaScript

var App = angular.module('App', []);

App.controller('Ctrl', function($scope) {
    $scope.data = [[[0, 1], [1, 500], [2, 2]]];
});

App.directive('chart', function() {
    return {
        restrict: 'A',
        link: function(scope, elem, attrs) {
            var data = scope[attrs.ngModel];
            $.plot(elem, data, {});
        }
    };
});