How to Integrate Flot with AngularJS?

Since charting involves heavy DOM manipulation, directives are the way to go.

Data can be kept in the Controller

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

And you can create a custom HTML tag1 specifying the model you want to get data from

 <chart ng-model="data"></chart>

which angular can compile through a directive

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

Example here.

This process is similar for most plugins that modify the DOM.

-*-

Also, you can watch for changes in the chart’s underlying data and redraw it, so this way you can grab data through the $http service from your controller and update the view automatically. This can be achieved by modifying the linking function in the directive definition object

   var chart = null,
       opts  = { };

    scope.$watch(attrs.ngModel, function(v){
        if(!chart){
            chart = $.plot(elem, v , opts);
            elem.show();
        }else{
            chart.setData(v);
            chart.setupGrid();
            chart.draw();
        }
    });

Notice the usage of Flot’s API within the directive to achieve what we want.

Here the full example

1 Can be an attribute too.