При нажатии пройти div на той же странице через угловой

Если вы не хотите, чтобы исчезали автоматически, когда вы выходите из контекстного меню всплывающего окна. static всплывающем всплывающем окне можно установить backdrop.

$modal.open({backdrop:'static'})

 <section class="content">
      <div class="row">
        <div class="col-xs-12">
          <div class="box">
            <div class="box-header">
              <h3 class="box-title">Visitors List</h3>
              <div class="box-tools">
                <div class="input-group">

                  <input type="text" name="table_search"  
         ng- model="query" class="form-control input-sm pull-right" 
        style="width: 150px;" placeholder="Search"/>
                  <div class="input-group-btn">
                    <button class="btn btn-sm btn-default">
            <i class="fa fa-search"></i></button>
                  </div>
                </div>
              </div>
            </div>
            <div class="box-body table-responsive no-padding">
   <div ng-controller="MainCtrl" class="container">
    <table class="table table-hover" ng-model="artists" >
                <tr>
                  <th>Name</th>
                  <th>Profile</th>
                  <th>First Name</th>
                  <th>Date</th>
                  <th>Status</th>
                  <th>Reknown</th>
                </tr>


                  <tr ng-repeat="item in artists" 
              style="cursor:pointer;">
                 <!--Actually it not a name 
     and email, it a chat box, I'm tyrying to build while click on   
     the visitors list, the chat box has to be displayed in the form of
     popup like facebook, gmail. but i'm new to angular.  -->
                        <modal title="Chat box" visible="showModal">
                            <form role="form">
                            <div class="form-group">
                            <label for="text">"name"</label>
                            <input type="text" class="form-control" 
             id="email" placeholder="Name" />
                            </div>
                            <div class="form-group">
                            <label for="password">Password</label>
                            <input type="password" class="form-control"
           id="password" placeholder="Password" />
                            </div>
                            <button type="submit" class="btn btn-
          default">Send</button>
                                </form>
                        </modal>

                  <td ng-click="toggleModal(artists.indexOf(item))" >
    <span value="{{artists.indexOf(item)}}"></span>{{item.name}}</a>
    </td>
                  <td ng-click="toggleModal()"><span value="
         {{artists.indexOf(item)}}">
                  </span><img ng-src="images/{{item.shortname}}_tn.jpg"
          width="35" height="35" alt="profile"></td>
                  <td ng-click="toggleModal()"><span value="
    {{artists.indexOf(item)}}"></span><h5>{{item.shortname}}</h5></td>
                  <td ng-click="toggleModal()"><span value="
            {{artists.indexOf(item)}}"></span>11-7-2014</td>
                  <td ng-click="toggleModal()"><span value="  
      {{artists.indexOf(item)}}"></span><span class="label label-
       success">Approved</span></td>
                  <td ng-click="toggleModal()"><span value="
         {{artists.indexOf(item)}}"></span>{{item.reknown}}</td>
                  <tr>

              </table>
              </div>
            </div>
          </div>
        </div>
      </div>
      </section>
      </div>



var myApp = angular.module('myApp', [
'ngRoute',
'myApp'
 ]);



 myApp.controller('ListController', ['$scope', '$http', 
 '$routeParams',  function($scope, $http, $routeParams) {
 $http.get('angular/data.json').success(function(data) {
  $scope.artists = data;
  $scope.artistOrder = 'name';
  $scope.whichItem = $routeParams.itemId;
  });
 }]);

myApp.controller('MainCtrl', ['$scope', '$http',
'$routeParams', function($scope, $http, $routeParams) {
$http.get('angular/data.json').success(function(data) {
$scope.showModal = false;
$scope.artists = data;
$scope.whichItem1 = $routeParams.itemId;
$scope.toggleModal = function(){
$scope.showModal = !$scope.showModal;

};
});
}]);



myApp.directive('modal', function () {
return {
  template: <!--In this place I want to pass my own coustomized 
    html which doesnot close on click outside -->
      '<div class="modal">' + 
      '<div class="modal-dialog">' + 
        '<div class="modal-content">' + 
          '<div class="modal-header">' + 
            '<button type="button" class="close" data-dismiss="modal" 
         aria-hidden="true">&times;</button>' + 
            '<h4 class="modal-title">{{ title }}</h4>' + 
          '</div>' + 
          '<div class="modal-body" ng-transclude></div>' + 
        '</div>' + 
       '</div>' + 
       '</div>',
      restrict: 'E',
     transclude: true,
     replace:true,
    scope:true,
    link: function postLink(scope, element, attrs) {
     scope.title = attrs.title;

     scope.$watch(attrs.visible, function(value){
      if(value == true)
        $(element).modal('show');
      else
        $(element).modal('hide');
    });

    $(element).on('shown.bs.modal', function(){
      scope.$apply(function(){
        scope.$parent[attrs.visible] = true;
      });
    });

    $(element).on('hidden.bs.modal', function(){

      scope.$apply(function(){
        scope.$parent[attrs.visible] = false;
      });
     });
          }
 };
 });