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>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.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 />
<tabset>
<tab heading="With Tabs">
<div class="chart" chart="" ng-model='data'></div>
</tab>
</tabset>
</div>
</div>
CSS
.chart {
width:400px;
height:200px;
}
JavaScript
var App = angular.module('App', ['ui.bootstrap']);
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, {});
}
};
});