title: Angular-Datatable Buttons will not render
body: <p>I have followed this example thoroughly and still cannot render any of the buttons on a datatable I am drawing using server-side processing. Here is the code:</p>
  
  <pre><code> vm.dtOptions = DTOptionsBuilder.newOptions()
                              .withOption('ajax', {
                                type: 'POST',
                                url: /my/api/here,
                                headers: {
                                  'Authorization': 'Basic blah12345'
                                },
                                dataSrc: function(resp){
  
                                  var data = resp.data;
                                  data.forEach(function(el){
                                   //moment.js              
                                   if(el.process_date){
                                     el.process_date = moment(el.process_date).format("MMM D YYYY, h:mm a");
                                   }else{
                                    el.process_date = "N/A"
                                   }                                 
                                   if(el.event_date){
                                     el.event_date = moment(el.event_date).format("MMM D YYYY, h:mm a");
                                   }else{
                                    el.event_date = "N/A"
                                   }  
                                   //------------------------------------------------------------------------
                                   if(el.description === null || !el.description){
                                     el.description = "N/A";
                                   }  
                                  });
                                return data;
                                }
                              })
                              .withDOM('Bfrtip')   // I have tried dif options here from other examples
                              .withDataProp('data')
                              .withOption('serverSide', true)
                              .withOption('processing', true)
                              .withOption('order', [[0, 'desc']])
                              .withPaginationType('full_numbers')
                              .withButtons([
                                          'columnsToggle',
                                          'colvis',
                                          'copy',
                                          'print',
                                          'excel',
                                          {
                                              text: 'Some button',
                                              key: '1',
                                              action: function (e, dt, node, config) {
                                                  alert('Button activated');
                                              }
                                          }
                                      ]);
        vm.dtColumns = [
            DTColumnBuilder.newColumn('event_date').withTitle('Event Date'),
            DTColumnBuilder.newColumn('process_date').withTitle('Process Date'),
            DTColumnBuilder.newColumn('reason').withTitle('Reason'),
            DTColumnBuilder.newColumn('description').withTitle('Description'),
            DTColumnBuilder.newColumn('amount').withTitle('Amount')
              .renderWith(function(data, type, full) {
                  return $filter('currency')(data, '$', 2)
                }),
            DTColumnBuilder.newColumn('balance').withTitle('Balance')
              .renderWith(function(data, type, full) {
                  return $filter('currency')(data, '$', 2)
                }),
            DTColumnBuilder.newColumn('id').withTitle('Sequence'),
        ];
  </code></pre>
  
  <p>Here, I resolve dependencies before I move the $state with my table:</p>
  
  <pre><code>  .state('app', {
        url: '/app',
        abstract: true,
        templateUrl: helper.basepath('app.html'),
        resolve: helper.resolveFor( 'moment','datatables', 'datatables.buttons')
    })
  </code></pre>
  
  <p>This is the HTML I am using to render the table:</p>
  
  <pre><code>&lt;div class="panel panel-default"&gt;
     &lt;div class="panel-body"&gt;
        &lt;div&gt;
           &lt;table datatable="" dt-options="fundsCtrl.dtOptions" dt-columns="fundsCtrl.dtColumns" dt-instance="fundsCtrl.dtInstance" class="row-border hover row-border hover"&gt;&lt;/table&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've noticed in the angular-datatables docs example, a css file was include as well:</p>
  
  <pre><code>&lt;link rel="stylesheet" href="vendor/datatables-buttons/css/buttons.dataTables.css"&gt;
  </code></pre>
  
  <p>which I dug up from the datatable docs and included it in my index.html, but didn't help my cause much.</p>
  
  <p>I would greatly appreciate any help! : )</p>
  
  <p>Thanks so much and look forward to hearing back</p>