title: How do I make an entire row clickable except for one cell and its margins in angular?
body: <p>Let's say I have a row that looks like</p>
  
  <pre><code>&lt;tr&gt;
    &lt;td&gt;John&lt;/td&gt;
    &lt;td&gt;Smith&lt;/td&gt;
    &lt;td&gt;Approved?&lt;input type="checkbox"/&gt;&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>Each row shows one employee, and allows you to check to approve/disapprove the employee (e.g. for registration for a course). I want the user to be able to click anywhere on the row to get greater detail about the employee, but if they click on the last column ("Approved?") it should not go to greater detail, since it should just change the checkbox.</p>
  
  <p>Here are the solutions I know of, none is great:</p>
  
  <ol>
  <li>Entire row: <code>&lt;tr class="clickable" ng-click="go()"&gt;</code>. Makes all the cells and margins clickable, and only requires one <code>ng-click</code> entry, but then the checkbox causes "go()" to execute, which is bad.</li>
  <li>Each cell: <code>&lt;td class="clickable" ng-click="go()"&gt;...&lt;td class="clickable" ng-click="go()"&gt;</code>. Pro: can restrict to just the cells I want. Con: lots of repetition (not DRY), and misses the margins.</li>
  <li>Entire row with special "go" fn: <code>&lt;tr class="clickable" ng-click="go()"&gt;</code>, but "go" knows how to differentiate between different cells. Pro: Has exactly the effect. Con: requires lots of view/html knowledge in a specialized controller action.</li>
  </ol>
  
  <p>How can I make the first 2 columns and their margins clickable, but not the 3rd or its margins?</p>