Angular JS tabs CSS

I am trying to build a tab page with my website using AngularJS only. I saw somewhere that it is not advisable to augment AngularJS with Jquery.

I have difficulties in remove the line between the tab and the tab content. E.g. When tab 1 is chosen, then the line below tab 1 will disappear.

Can anyone help with the CSS question?

Thank you.

My HTML

<html ng-app>
<div class="tabgroup" ng-init="tab=1">
<div class="tab" ng-click="tab = 1">tab1</div>
<div class="tab" ng-click="tab = 2">tab2</div>
</div>
<div class="tabcontents">   
<div ng-show="tab == 1">
    tab 1 contents
</div>
<div ng-show="tab == 2">
    tab 2 contents
</div>
</html>
</div>

Current CSS

.tabgroup{
background:white; 
}
.tab{
color:black;    
display:inline-block;
border: 1px solid #000000;
padding: 5px;
}
.tabcontents{
border: 1px solid #000000;    
padding: 5px;
}

This is my Fiddle