removing cells with bootstrap

<!DOCTYPE html>
<html ng-app="test">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="mainController">
    <div id="mylbl"></div>
    <div class="container">
      <table>
        <tbody>
          <tr repeated-item ng-repeat="item in items"></tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

angular.module('test', [])
.controller('mainController', function($scope) {
	$scope.items = [1,2,3];
})
.directive('repeatedItem', function() {
  var lbl = $("#mylbl");
  return {
    restrict: 'A',
    replace: true,
    controller: function($scope){
      //$scope.clickrow = function($event){
        //console.log(event.currentTarget);
        //lbl.text('THIS SHOULD ONLY SHOW WHEN THE BUTTON IS HIDDEN (VIEW XS)');
      //};
       $scope.clickbutton = function(){
        lbl.text('CLICKED BUTTON');
      };
    },
    link: function(scope, elem){
      scope.clickrow = function ($event) {
        console.log(elem.find('button:visible').length);
        console.log($(event.currentTarget).find('button:visible').length);
        var isButtonVisible = elem.find('button:visible').length;
        var isRowClickAllowed = isButtonVisible === 0;

        if (isRowClickAllowed) {
            alert('Row click event was triggered!');
        } else {
            console.log('Row click event was triggered, but we did nothing, because the button is visible and accessible.');
        }
      };
    },
    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>'
  };
});

/* Styles go here */
body {
  width: 100%;
  height: 100%;
  padding-top:40px;
}
table {
  width: 100%;
	font-size:12px;
}
table th {
	border:1px solid #fafafa;
}
table td {
	padding:18px;
	border: 1px solid #000000;
}
.hidden-xs {
	background-color:#44ffff;
}
#mylbl{
  text-align: center;
}
button{
  width: 100%;
  height: 50px;
}