Cómo integrar Flot con AngularJS?

Dado que los gráficos implican una manipulación pesada del DOM, las directivas son el camino a seguir.

Los datos se pueden mantener en el Controlador

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

Y puede crear una etiqueta HTML personalizada1 especificar el modelo del que desea obtener datos

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

Qué angular puede compilar a través de una directiva

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

Ejemplo aquí.

Este proceso es similar para la mayoría de los plugins que modifican el DOM.

-*-

Además, puede estar atento a los cambios en el los datos subyacentes del gráfico y volver a dibujarlos, por lo que de esta manera puede obtener datos a través del servicio http http de su controlador y actualizar la vista automáticamente. Esto puede lograrse modificando la función de enlace en el objeto de definición de directiva

   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();
        }
    });

Observe el uso de la API de Flot dentro de la directiva para lograr lo que queremos.

Aquí el ejemplo completo

1 Puede ser un atributo demasiado.