Replace angular UI-GRID selection RowButton with checkbox
<p>I need to replace the UI grid selection header content with a regular checkbox instead of default OK button.
 I was able to insert checkbox but I am not able to control the row checkbox value based on column header checked checkbox. 
 Requirement: When the column header checkbox is selected, all the row checkboxes should be selected. 
  When a row checkbox is unselected then the column header checkbox should be unselected.</p>

<p>Select/unselect checkbox works but I should be able to control the row checkbox based on column header checkbox. </p>

<p>I am struggling with scope here. Any help/suggestion is appreciated. </p>

<p>Plunker Link: <a href="http://plnkr.co/edit/Ji7gLbfQTohnEj04mYFM?p=preview" rel="nofollow">http://plnkr.co/edit/Ji7gLbfQTohnEj04mYFM?p=preview</a></p>

<pre><code> $templateCache.put('ui-grid/selectionRowHeaderButtons',
    "&lt;div class=\"ui-grid-selection-row-header-buttons \" ng-class=\"{'ui-grid-row-selected': row.isSelected}\"&gt;&lt;input style=\"margin: 0; vertical-align: middle\" type=\"checkbox\" ng-model=\"rowSelected\" ng-click=\"grid.appScope.clickConditionRow(rowSelected) &amp;&amp; selectButtonClick(row, $event)\"&gt;&amp;nbsp;&lt;/div&gt;"
  );
</code></pre>