Angular - Lost dblClick

When putting an entire table into a directive, the dblClick directive refuses to fire.

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div data-ng-app="app">
  <div id="appWrapper" data-ng-cloak="" data-ng-controller="appCntrl">

    <row-details data-ng-if="showDetailFlag" details="paramDetails" types="paramTypes"></row-details>
    <div class="container" data-ng-if="!showDetailFlag" >
    Double-Click Fails
    <div data-param-list values="paramValues" ></div>
    <p>
    Double-Click works
    </p>
    <table id="params-list" class="table table-hover">
        <thead>
          <tr>
            <th>Type</th>
            <th>Description</th>
            <th>Value</th>
            <th>Active?</th>
          </tr>
        </thead>
        <tbody>
          <tr row-values values="paramValues"></tr>
        </tbody>
      </table>
    </div>

  </div>
</div>

JavaScript

var app = angular.module('app', []);

app.directive('rowValues', function() {
  return {
    restrict: 'A',
    template: '<tr data-ng-repeat="row in values" data-ng-dblclick="showDetail(row)"> \
              <td>{{row.NAME}}</td><td>{{row.DESCR}}</td> <td>{{row.VALUE}}</td> \
              <td>{{row.ACTIVE}}</td> </tr>',
    scope: {
      values: "=",
      showDetail: "&ngdblClick"
    },
    replace: true
  };
});

app.directive('paramList', function() {
  return {
    restrict: 'A',
    template: '<table id="params-list" class="table table-hover"><thead><tr> \
            <th>Type</th><th>Description</th><th>Value</th><th>Active?</th></tr> \
            </thead><tbody> \
            <tr data-ng-repeat="row in values" data-ng-dblclick="Alert('click'); showDetail(row)"> \
              <td>{{row.NAME}}</td><td>{{row.DESCR}}</td> <td>{{row.VALUE}}</td> \
              <td>{{row.ACTIVE}}</td> </tr></tbody></table>',
    scope: {
      values: "=",
      showDetail: "&ngdblClick"
    },
    replace: false
  };
});

app.directive('rowDetails', function() {
  return {
    restrict: 'E',
    template: '<form id="frm-details" data-ng-submit="saveChanges()"> <h4>Details for: {{details.NAME}}</h4> \
              <button type="submit" class="btn btn-default">Save Changes</button></form>',
    scope: {
      details: "=",
      saveChanges: "&ngSubmit",
    },
    replace: true
  };
});


app.controller('appCntrl', ['$scope', function($scope) {
  $scope.paramDetails;
  $scope.showDetailFlag = false;
  $scope.paramValues = [{
    NAME: "PNAME1",
    VALUE: "PVALUE1",
    TYPE: "PTYPE1",
    ACTIVE: "YES",
    DESCR: "PDESCR1"
  }, {
    NAME: "PNAME2",
    VALUE: "PVALUE2",
    TYPE: "PTYPE2",
    ACTIVE: "NO",
    DESCR: "PDESCR2"
  }];

  $scope.showDetail = function(row) {
    $scope.paramDetails = row;
    $scope.showDetailFlag = true;
  };
  
  $scope.saveChanges  = function() {
    $scope.showDetailFlag = false;
  }

}]);