title: Angular Datatables - binding values in dom options
body: <p>Briefly, what I need to do is customize angular datatables adding a select statement on top, but I also need to bind a model from controller to directive.
  Here's how my code looks like (took from <a href="http://l-lin.github.io/angular-datatables/archives/#!/angularDirectiveInDOM" rel="nofollow noreferrer">angular-datatables guide</a> and modifyied:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module('showcase.customButton', ['datatables'])
      .controller('CustomElementCtrl', CustomElementCtrl)
      .directive('datatableWrapper', datatableWrapper)
      .directive('customElement', customElement);
  
  function CustomElementCtrl(DTOptionsBuilder, DTColumnBuilder) {
      var vm = this;
      vm.dtOptions = DTOptionsBuilder.fromSource('data.json')
          // Add your custom button in the DOM
          .withDOM('lfr&lt;"custom-element"&gt;tip');
      vm.dtColumns = [
          DTColumnBuilder.newColumn('id').withTitle('ID'),
          DTColumnBuilder.newColumn('firstName').withTitle('First name'),
          DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible()
      ];
  }
  
  /**
   * This wrapper is only used to compile your custom element
   */
  function datatableWrapper($timeout, $compile) {
      return {
          restrict: 'E',
          transclude: true,
          template: '&lt;ng-transclude&gt;&lt;/ng-transclude&gt;',
          link: link
      };
  
      function link(scope, element) {
          // Using $timeout service as a "hack" to trigger the callback function once everything is rendered
          $timeout(function () {
              // Compiling so that angular knows the button has a directive
              $compile(element.find('.custom-element'))(scope);
          }, 0, false);
      }
  }
  
  /**
   * Your custom element
   */
  function customElement() {
      return {
          restrict: 'C',
      scope: {
        model: '=',
      },
      template: '\
                &lt;label&gt;Column:\
                  &lt;select ng-model="model" class="form-control input-sm"&gt;\
                    &lt;option ng-value=""&gt;&lt;/option&gt;\
                    &lt;option ng-value="id"&gt;ID&lt;/option&gt;\
                    &lt;option ng-value="code"&gt;Codice&lt;/option&gt;\
                    &lt;option ng-value="description"&gt;Descrizione&lt;/option&gt;\
                    &lt;option ng-value="time"&gt;Tempo&lt;/option&gt;\
                  &lt;/select&gt;\
                &lt;/label&gt;\
                '
      };
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div ng-controller="CustomElementCtrl as showCase"&gt;
      &lt;datatable-wrapper&gt;
          &lt;table datatable="" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="row-border hover"&gt;
          &lt;/table&gt;
      &lt;/datatable-wrapper&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>