I have a table, with a button in the third cell of each row. The button/cell is hidden in xs view, using twitter-bootstrap. Here's a plunker of the example: <http://embed.plnkr.co/Huu9UtVYChMf34uoUsAk>

HTML:

```
<table>
  <tbody>
    <tr repeated-item ng-repeat="item in items"></tr>
  </tbody>
</table>

```

JS:

```
angular.module('test', []).directive('repeatedItem', function() {
  var lbl = $("#mylbl");
  return {
    restrict: 'A',
    replace: true,
    controller: function($scope){
      $scope.clickrow = function(){
        lbl.text('THIS SHOULD ONLY SHOW WHEN THE BUTTON IS HIDDEN (VIEW XS)');
      };
       $scope.clickbutton = function(){
        lbl.text('CLICKED BUTTON');
      };
    },
    template: '<tr ng-click="clickrow()"><td class="table-col1">Cell 1</td><td>Cell 2</td><td class="hidden-xs"><button ng-click="clickbutton()">Cell 3</button></td></tr>'
  };
});

```

You can see that the third cell is hidden when the window shrinks. At this point, the ENTIRE TABLE ROW needs to become clickable.

My question is "How can I make the table row clickable only when the device is in xs view?" My best idea right now is to use two different tables to do the job.

I think I can mostly achieve desired results using ng-touch instead of ng-click for the table row, but that won't work for non-touch devices when the button is hidden.