AngularJS 1.2.x

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

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  
  $scope.boxList = [
    {id:1, name: 'Box1'},
    {id:2, name: 'Box2'},
    {id:3, name: 'Box3'}
  ];
  
  $scope.openBox = function(id) {
    alert('Clicked');
  }
  
});


app.directive('noclick', [function() {
    return {
      restrict: 'A',
      link: function link(scope, element, attrs) {
        element.bind('click', function(e) {
            e.stopPropagation();
        });
      }
    }
}]);

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.15/angular.js" data-semver="1.2.15"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
   <table>
    <tr ng-repeat="box in boxList" ng-click="openBox(box.id)">
    <td>{{box.id}}</td>
    <td>...</td>
    <td>...</td>
    <td><input type="checkbox" ng-change="checkBoxChanged(box.id)" ng-model="blaa" noclick></td>
</tr>
</table>
  </body>

</html>

/* Put your css in here */