On click pass div in same page through angular

If you dont want disappers automatically when click outsite of the popup. You can set backdrop to static when popup opened.

$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's not a name 
     and email, it's 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;
      });
     });
          }
 };
 });