click a row on the table, clicking outside the table should hide the remove/edit menu

<!doctype html>
<html ng-app="tao">
  <head>
    <link rel="stylesheet" href="http://twbs.github.io/bootstrap/dist/css/bootstrap.css">
    <script src="http://code.angularjs.org/1.0.8/angular.min.js"></script>
    <script src="script.js"></script>
    <style>tr.active > td { background: skyblue !important; color: #fff; }</style>
  </head>
  <body>
    <nav class="navbar navbar-default" role="navigation" ng-controller="MenuCtrl">
      <ul ng-show="isCollapsed" class="nav navbar-nav">
        <li><a href="#">Remove</a></li>
        <li><a href="#">Edit</a></li>
      </ul>
    </nav>
    <table ng-controller="PersonCtrl" class="table" ng-deselect>
     <tr>
       <th>Name</th>
       <th>Age</th>
     </tr>
      <tr ng-repeat="person in people" ng-click="selectPerson(person)" ng-class="{active: person.selected }">
        <td>{{ person.name }}</td>
        <td>{{ person.age }}</td>
      </tr>
    </table>
  </body>
</html>

var tao = angular.module('tao', [])

.controller('PersonCtrl', function($scope, $rootScope, MenuSvc, PeopleFctr) {
  $scope.selectedPerson = null;
  
  $scope.people = PeopleFctr;
  
  $scope.selectPerson = function(person) {
    if ($scope.selectedPerson !== null) $scope.selectedPerson.selected = false;
    
    person.selected = true;
    $scope.selectedPerson = person;
    MenuSvc.collapsed = true;
  };
})

.factory('PeopleFctr', function() {
  return [
    { name: 'adam', age: 24 },
    { name: 'steve', age: 30 }
  ];
})

.controller('MenuCtrl', function($scope, MenuSvc) {
  $scope.isCollapsed = MenuSvc.collapsed;
  $scope.menuService = MenuSvc;
  
  $scope.$watch(function() {
    return $scope.menuService.collapsed;
  }, function() {
    $scope.isCollapsed = MenuSvc.collapsed;
  });
})

.service('MenuSvc', function() {
  return {
    collapsed: false
  }
})

.directive('ngDeselect', function($document, MenuSvc) {
  
  var link = function(scope, element) {
    $document.bind('click', function(event) {
      var i, inside = false, matches = element.find(event.target.tagName);
      
      for(i=0; i<matches.length; i++) {
        if (event.target === matches[i]) inside = true;
      }
      
      if (!inside) {
        MenuSvc.collapsed = false;
        scope.selectedPerson.selected = false;
      }
      
      scope.$apply();
    });
  }
  
  return {
    link: link
  };
});