title: close popover by clicking other tabs
body: <p>I am new to angular js, i want to create tabbing which can be rename and can be switch positions inter-between, i have created dome Here's [a link] (<a href="http://plnkr.co/edit/sIQevsrtTStDvqvG9ot4?p=preview" rel="nofollow">http://plnkr.co/edit/sIQevsrtTStDvqvG9ot4?p=preview</a> ), i want to close popover when click on other tabs after rename</p>
  
  <pre><code>     &lt;html ng-app="MyTabsUI"&gt;
            &lt;head&gt;
              &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"&gt;&lt;/script&gt;
              &lt;script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"&gt;&lt;/script&gt;
              &lt;script src="mindit.js"&gt;&lt;/script&gt;
              &lt;link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"&gt;
              &lt;link href="style.css" rel="stylesheet"&gt;
            &lt;/head&gt;
            &lt;body&gt;
            &lt;div class="container" ng-controller="TabsDemoCtrl"&gt;
  
              &lt;div class="col-md-12"&gt;
              &lt;tabset &gt;
                      &lt;tab ng-model='newTab' popover-template="dynamicPopover.templateUrl"
                      popover-placement="bottom" sortable-tab ng-repeat="tab in data.tabs"
                      heading="{{tab.name}}" active="tab.active" disabled="tab.disabled" index='{{$index}}' 
                      class="closePopover clickbtn"  rel='popover' &gt;
                          &lt;div class="column"&gt;
  
                          &lt;/div&gt;
                        &lt;script type="text/ng-template" id="myPopoverTemplate.html"  &gt;
                            &lt;div class="form-group"&gt;
                              &lt;label&gt;Enter Title : &lt;/label&gt;
                              &lt;input type="text" ng-model="tab.name" class="form-control"&gt;
                            &lt;/div&gt;
                        &lt;/script&gt;
                     &lt;/tab&gt;
                      &lt;tab&gt;
                      &lt;tab-heading&gt;
                      &lt;i ng-click="add()" class="glyphicon glyphicon-plus"&gt;Groups&lt;/i&gt;
                      &lt;/tab-heading&gt;
                       &lt;/tab&gt;
                    &lt;/tabset&gt;
                  &lt;/div&gt;
            &lt;/div&gt;
            &lt;/body&gt;
          &lt;/html&gt;
  
  
  angularjs
  
  
  var app = angular.module('MyTabsUI', ['ui.bootstrap']);
  app.controller('TabsDemoCtrl', function ($scope,$http) {
    var cnt=0
    $scope.data = [];
    $scope.data.tabs = [ ];
    $scope.result ;
      /* for adding tabs*/
      $scope.add = function() 
      {
        cnt++; /* used to limet the tabing adding functions*/
        if(cnt &lt; 4){
                $scope.isDisabled = false;
               // var iniTab = [{'header':'1'},{'datacontent':'datacontent'}];       intTab: iniTab,
                $scope.data.tabs.push({name:'Dynamic Title'});
                return $scope.data.tabs;  
        }else{
                 $scope.isDisabled = true;
                return false;
        }
      };
  
      /* to rename tabs*/
      $scope.dynamicPopover = {
          content: 'hello',
          templateUrl: 'myPopoverTemplate.html',
          title: 'Title'
      };
  });
  app.directive('sortableTab', function() 
  {
    return {
      link: function(scope, element, attrs, controller) {
        // Attempt to integrate with ngRepeat
        // https://github.com/angular/angular.js/blob/master/src/ng/directive/ngRepeat.js#L211
        var match = attrs.ngRepeat.match(/^\s*([\s\S]+?)\s+in\s+([\s\S]+?)(?:\s+track\s+by\s+([\s\S]+?))?\s*$/);
        var tabs;
        scope.$watch(match[2], function(newTabs) {
          tabs = newTabs;
        });
        var index = scope.$index;
        scope.$watch('$index', function(newIndex) {
          index = newIndex;
        });
        attrs.$set('draggable', true);
        // Wrapped in $apply so Angular reacts to changes
        var wrappedListeners = {
          // On item being dragged
          dragstart: function(e) {
            e.dataTransfer.effectAllowed = 'move';
            e.dataTransfer.dropEffect = 'move';
            e.dataTransfer.setData('application/json', index);
            element.addClass('dragging');
          },
          dragend: function(e) {
            //e.stopPropagation();
            element.removeClass('dragging');
          },
          // On item being dragged over / dropped onto
          dragenter: function(e) {
          },
          dragleave: function(e) {
            element.removeClass('hover');
          },
          drop: function(e) {
            e.preventDefault();
            e.stopPropagation();
            var sourceIndex = e.dataTransfer.getData('application/json');
            move(sourceIndex, index);
            element.removeClass('hover');
          }
        };
        // For performance purposes, do not
        // call $apply for these
        var unwrappedListeners = {
          dragover: function(e) {
            e.preventDefault();
            element.addClass('hover');
          },
          /* Use .hover instead of :hover. :hover doesn't play well with 
             moving DOM from under mouse when hovered */
          mouseenter: function() {
            element.addClass('hover');
          },
          mouseleave: function() {
            element.removeClass('hover');
          }
        };
        angular.forEach(wrappedListeners, function(listener, event) {
          element.on(event, wrap(listener));
        });
        angular.forEach(unwrappedListeners, function(listener, event) {
          element.on(event, listener);
        });
        function wrap(fn) {
          return function(e) {
            scope.$apply(function() {
              fn(e);
            });
          };
        }
        function move(fromIndex, toIndex) {
          // http://stackoverflow.com/a/7180095/1319998
          tabs.splice(toIndex, 0, tabs.splice(fromIndex, 1)[0]);
        }
      },
    }
  });
  </code></pre>