invoicePivot.html

    
<style>
    * {
        font-family: Verdana;
    }
  	  
    .node {
        border: solid 1px white;
        font: 10px sans-serif;
        line-height: 12px;
        overflow: hidden;
        position: absolute;
        text-indent: 2px;
    }
</style>
<section ng-controller="invoicePivot">
    <div class="container-fluid ">
        <div class="row">
            <div id="invoicesPivotTableOutput"></div>
        </div>
    </div>
</section>
    

invoicePivot.js

    'use strict';
    (function() {
    angular.module('app').controller('invoicePivot', invoicePivot);
    function invoicePivot($scope,  $http) {
  	  
        $scope.invoices = [];
    
        getInvoices();
    
  	  
        /*********************************************************
        * Region get data 
        *********************************************************/
        function getInvoices() {
            var entity = 'Invoice';
            var resource = 'getInvoices';
            var url = 'http://' + window.location.host + '/api/' + entity + '/' + resource;
            return $http.get(url, { cache: true }).
            success(function (data) {
                $scope.invoices = data;
                pivotUi();
            }).
  	  
            error(function (error) {
  	  
            });
        }
  	  
        function pivotUi() {
            // wiki https://github.com/nicolaskruchten/pivottable/wiki/Aggregators
            var renderers = $.extend($.pivotUtilities.renderers, $.pivotUtilities.gchart_renderers, $.pivotUtilities.d3_renderers);
            $("#invoicesPivotTableOutput").pivotUI($scope.invoices, {
                renderers: renderers,
                rows: ["PrintDocNumber"],
                cols: ["IsPrinted"],
                rendererName: "Table"  	  
            });
        }
  	  
  	}  
})();