Bootstrap 3 - tabs with context menu

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.4.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<div ng-controller="mainCtrl">
   
     <tabset>
        <tab class="tabbedclass" ng-repeat="t in tabs" name="$index" id="{{$index}}">
            <tab-heading>{{t.title}}</tab-heading>
            <div ng-bind-html-unsafe='t.content'>
                
            </div>
        </tab>
    </tabset>
      <div id="contextMenu" class="dropdown clearfix">
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
      <li><a tabindex="-1" href="#">Action</a></li>
      <li><a tabindex="-1" href="#">Another action</a></li>
      <li><a tabindex="-1" href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a tabindex="-1" href="#" ng-click="tabs.length == 1 || removeTab(tabToRemove)" ng-class="{'disabled' : tabs.length == 1}">Delete Tab</a></li>
    </ul>
  </div>
</div>

CSS

#contextMenu {
  position: absolute;
 display:none;
}
.disabled{
    color:grey;
    cursor:not-allowed;
}

JavaScript

angular.module('myApp', ['ui.bootstrap'])
    .controller("mainCtrl", function ($scope,$window) {
    $scope.tabs = [{        
        title: "one",
        content: '<h1>tab one</h1>'
    }, {
        title: "two",
        content: '<h1>tab two</h1>'
    }, {
        title: "three",
        content: '<h1>tab three</h1>'
    }];
        
    $scope.removeTab = function (tab) {
        console.log("inside remove tab fn");
        var text = tab.currentTarget.innerText;   
        if($scope.tabs.length > 1){ 
            for(var i=0;i<$scope.tabs.length;i++){
                if(text.trim() == $scope.tabs[i].title)  
                $scope.tabs.splice(i, 1);
            }
        }
    };
        $scope.selected = {value: 0};
       var $contextMenu = $("#contextMenu"); 
        $("body").on("contextmenu", "li.tabbedclass", function(e) {
           $scope.tabToRemove = e;
            $contextMenu.css({
      display: "block",
     left: e.pageX,
      top: e.pageY
   });
   return false;
});
         $contextMenu.on("click", "a", function() {
     $contextMenu.hide();
  });
          $contextMenu.on("mouseleave", function() {
     $contextMenu.hide();
  });
});