title: Angular 4 Datatable
body: <p>I'm using <strong>angular4</strong> datatable with ajax from here : <a href="https://l-lin.github.io/angular-datatables/#/basic/with-ajax" rel="nofollow noreferrer">github</a></p>
  
  <p>All the stuff works fine but i can not <strong>bind</strong> dynamic <code>ngModel</code> to the my elements</p>
  
  <p>Is there any way to bind <code>ngModel</code> to it.
  Below is my dt-option configuration and you can see in column title extra there is a model binding.</p>
  
  <p>Please help me with this.
  Thanks in advance.</p>
  
  <pre><code>this.dtOptions = {
          ajax: {
              url: '/api/users/get_users'
              , dataSrc: 'data'
              , type: "POST"
              , data: {test: 1}
              , headers: {
                  //                    Authorization: 'Bearer ' + localStorage.getItem('token')
                  Authorization: 'Bearer awdsafsdvaefaa5s4das5d4sa4sadd58a7sd45sa4dsad5a4d5sadasd54sad54d54d5sa4dsa5d4sad54sad5d5sa' + localStorage.getItem('token')
              }
          },
          pagingType: 'full_numbers',
          pageLength: 10,
          serverSide: true,
          processing: true,
          columns: [
              {
                  title: '',
                  defaultContent: '&lt;input type="checkbox"&gt;'
              },
              {
                  title: 'ID',
                  data: 'id'
              },
              {
                  title: 'First name',
                  data: 'firstname'
              },
              {
                  title: 'Last name',
                  data: 'lastname'
              },
              {
                  title: 'Status',
                  defaultContent: '&lt;button class="btn btn-default btn-xs edit-country-btn"&gt;Active&lt;/button&gt;'
              },
              {
                  title: 'Actions',
                  orderable: false,
                  searchable: false,
                  defaultContent: '&lt;button class="btn btn-default btn-xs edit-country-btn"&gt;Edit&lt;/button&gt;'
              },
              {
                  title: 'Extra',
                  orderable: false,
                  searchable: false,
                  data: function (full, data, row, meta)
                  {
                      if (!self.temp)
                      {
                         //dynamic ngModel binding 
                          return '&lt;button [(ngModel)]="dynamic_model[full.id]" [disabled]="true" class="btn btn-default btn-xs edit-country-btn"&gt;EXTRA&lt;/button&gt;';
                      }
                      else
                      {
                          return '---';
                      }
                  }
              },
              {
                  title: 'Extra2',
                  orderable: false,
                  searchable: false,
                  defaultContent: ''
              },
              {
                  title: 'Extra3',
                  orderable: false,
                  searchable: false,
                  render: function (data, type, row, meta)
                  {
                      if (!self.temp)
                      {
                          return '&lt;button [disabled]="true" class="btn btn-default btn-xs edit-country-btn"&gt;EXTRA&lt;/button&gt;';
                      }
                      else
                      {
                          return '---';
                      }
                  }
              }
          ],
          rowCallback: (row: Node, data: any[] | Object, index: number) =&gt;
          {
              const self = this;
              var str = '---';
              var str1 = '&lt;button [disabled]="true" class="btn btn-default btn-xs edit-country-btn"&gt;TEST&lt;/button&gt;';
  
              //$('td:nth-child(1) input', row).bind('model', this.checkArr[0]);
  
              $('td:nth-child(5) button', row).bind('click', () =&gt;
              {
                  self.test(data);
              });
  
              $('td:nth-child(8)', row).append(str1);
  
              return row;
          }
      };
  </code></pre>