Angular NG-GRID with row ng-click and checkbox separate ng-click

//var app = angular.module('app', ['ui.grid']);
var app = angular.module('app', ['ngGrid']);

app.controller('MainCtrl', ['$scope', '$http', function($scope, $log, $http) {


  $scope.showMe = function($event) {
    $event.stopPropagation();
    alert('Hello from button click!');
  };

  $scope.rowClick = function(row) {
    alert("Hello from row click!");
  };

  $scope.toggle = function($event) {
    $event.stopPropagation();
    alert("Do something on checkbox click!");
  };


  $scope.myData = [{
    "name": "Ajay",
    "gender": "Male",
    "assigned": false
  }, {
    "name": "Neha",
    "gender": "Female",
    "assigned": false
  }, {
    "name": "Rupika",
    "gender": "Female",
    "assigned": false
  }, {
    "name": "Vikram",
    "gender": "Male",
    "assigned": false
  }, {
    "name": "Vijay",
    "gender": "Male",
    "assigned": false
  }, {
    "name": "Aniket",
    "gender": "Male",
    "assigned": false
  }];

  $scope.gridOptions = {
    data: 'myData',
    enableSorting: true,
    showSelectionCheckbox: true,
    selectWithCheckboxOnly: true,
    checkboxCellTemplate: '<div ng-click="toggle($event)" class="ngSelectionCell"><input tabindex="-1" class="ngSelectionCheckbox" type="checkbox" ng-checked="row.selected" /></div>',
    rowTemplate: '<div ng-click="rowClick(row)" ng-style="{ \'cursor\': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell {{col.cellClass}}"><div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }">&nbsp;</div><div ng-cell></div></div>',
    columnDefs: [{
      field: 'name',
      displayName: 'Name'
    }, {
      field: 'gender',
      displayName: 'Gender'
    }, {
      name: 'Button Function',
      cellTemplate: '<button class="btn primary" ng-click="showMe($event)">Do Something</button>'
    }]
  };
}]);

<!doctype html>
<html ng-app="app">
  <head>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.min.css" type="text/css">
  </head>
  <body>
    <div ng-controller="MainCtrl">
      <!--<div ui-grid="gridOptions" class="grid"></div>-->
      <div class="gridStyle" ng-grid="gridOptions"></div>
    </div>
    <script src="app.js"></script>
  </body>
</html>
<style>
  .gridStyle {
    width: 400px; 
    height: 300px;
}
</style>