title: How to resolve strange jquery function behavior?
body: <p>I have two buttons in a line of a datatable and each one of them has his own function on click event.
  The problem that the second function won't work when I click on its button but it does when I click on the fist one</p>
  
  <p>Here is the full controller:</p>
  
  <pre><code>(function () {
      'use strict';
      var table
      angular.module('app')
      .controller('wfCtrl', wfCtrl);
  
      function wfCtrl($scope, $location, $http) {
  
      $http({
          method: 'GET',
          url: 'http://localhost:8080/Spring4/data/lworkflows'
      }).then(function successCallback(response) {
          var wfs = response.data;
  
          table = $('#example1').DataTable({
                  "data": wfs,
  
                  "columns": [{
                          "className": 'details-control',
                          "orderable": false,
                          "data": "",
                          "defaultContent": ''
                      }, {
                          "data": "code"
                      }, {
                          "data": "statut"
                      }, {
                          "data": "label"
                      }, {
                          "data": "langue"
                      }, {
                          "data": "description"
                      }, {
                          "orderable": false,
                          "defaultContent": "&lt;div class='btn-group'&gt;" +
                          "&lt;button type='button' class='btn btn-success addst-btn' title='add a step' data-toggle='modal' data-target='#modal-addst'&gt;&lt;i class='fa fa-plus'&gt;&lt;/i&gt;&lt;/button&gt;" +
                          "&lt;button type='button' class='btn btn-info'&gt;&lt;i class='fa fa-pencil-square-o' title='edit workflow'&gt;&lt;/i&gt;&lt;/button&gt;" +
                          "&lt;button type='button' class='btn btn-danger' title='delete workflow'&gt;&lt;i class='fa fa-trash' &gt;&lt;/i&gt;&lt;/button&gt;" +
                          "&lt;/div&gt;"
                      }
                  ],
                  "order": [[1, "asc"]]
              });
  
      }, function errorCallback(response) {
          console.log("error");
      });
  
      function format(d) {
          $scope.modal = d;
  
          if (d.length == 0) {
              return "No steps"
  
          }
          var row = ""
              for (var i = 0; i &lt; d.length; i++) {
  
                  row += "&lt;tr&gt;" +
                  "&lt;td&gt;" + d[i].ordre + "&lt;/td&gt;" +
                  "&lt;td&gt;" + d[i].label + "&lt;/td&gt;" +
                  "&lt;td&gt;" + d[i].type + "&lt;/td&gt;" +
                  "&lt;td&gt;" + d[i].mode + "&lt;/td&gt;" +
                  "&lt;td&gt;&lt;button type='button' class='btn btn-xs  btn-info' data-toggle='modal' data-target='#modal-default" + d[i].ordre + "'&gt;Jump list&lt;/button&gt;&lt;/td&gt;" +
                  "&lt;td&gt;&lt;button type='button' class='btn btn-xs btn-info' data-toggle='modal' data-target='#modal-default'&gt;Consequence list&lt;/button&gt;&lt;/td&gt;" +
                  "&lt;/tr&gt;"
              }
  
              return "&lt;i&gt;Liste du Steps&lt;/i&gt;&lt;br /&gt;&lt;table class='table table-condensed table-hover'&gt;" +
              "&lt;tbody&gt;&lt;tr&gt;" +
              "&lt;th style='width: 10px'&gt;#&lt;/th&gt;" +
              "&lt;th&gt;Label&lt;/th&gt;" +
              "&lt;th&gt;Type&lt;/th&gt;" +
              "&lt;th&gt;Mode&lt;/th&gt;" +
              "&lt;th&gt;Jump&lt;/th&gt;" +
              "&lt;th&gt;Consequences&lt;/th&gt;" +
              "&lt;/tr&gt;" + row +
              "&lt;/tbody&gt;&lt;/table&gt;";
  
      }
      $('#example1 tbody').on('click', '.addst-btn', function () {
  
          var tr = $(this).closest('tr');
          $scope.selectedrow = table.row(tr).data().code;
          console.log("ok");
          alert($scope.selectedrow);
          console.log($scope.selectedrow + " a ");
  
      });
      $('#example1 tbody').on('click', 'td.details-control', function () {
          //console.log(this);
          //$(".details-control").not(this).click();
          var tr = $(this).closest('tr');
          var row = table.row(tr);
  
          if (row.child.isShown()) {
              // This row is already open - close it
              row.child.hide();
              tr.removeClass('shown');
          } else {
              $http({
                  method: 'GET',
                  url: 'http://localhost:8080/Spring4/data/steps?code=' + row.data().code
              }).then(function successCallback(response) {
                  var tr1 = $(".shown");
                  var row1 = table.row(tr1);
                  row1.child.hide();
                  tr1.removeClass('shown');
                  row.child(format(response.data.ls)).show();
                  tr.addClass('shown');
              }, function errorCallback(response) {
                  console.log("error");
              });
  
          }
      });
  
      }
  
  })();
  </code></pre>
  
  <p>THe problem is that the scope selectedrow is always not set when I click on #addst-btn but it works when I click on details-control</p>
  
  <p>Can anyone explain this? Thanks.</p>
  
  <p>Addition,</p>
  
  <p>I got it working when i added a $http request in the function strange isnt it ?</p>
  
  <pre><code>$('#example1 tbody').on('click', '.addst-btn', function () {
  
          var tr = $(this).closest('tr');
  
          $scope.selectedrow = table.row(tr).data().code;
          console.log("ok");
          alert($scope.selectedrow);
          console.log($scope.selectedrow + " a ");
  
      });
  </code></pre>