Tabs not working in Single Page Application with AngularJS - angularjs

Question

I have a "edit" view where I need to display tabs to separate the different information needed. I found a site where it discusses the creation of a directive to catch the tab changing. This is my first directive and it is not working. When I click on the second tab, it takes me back to my default view. Not sure what I have implemented incorrectly.
Web Page -
<ul class="nav nav-tabs">
<li class="active"><a showTab="" href="#home">Home</a></li>
<li><a showTab="" href="#menu1">Menu 1</a></li>
<li><a showTab="" href="#menu2">Menu 2</a></li>
<li><a showTab="" href="#menu3">Menu 3</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
The associated directive -
'use strict';
define(['app'], function (app) {
var injectParams = ['showtab'];
var wcTabDirective = function (showtab) {
return {
link: function (scope, element, attrs) {
element.click(function (e) {
e.preventDefault();
$(element).tabs('show');
});
}
}
};
wcTabDirective.$inject = injectParams;
app.directive('wcTab', wcTabDirective);
});
I have put a break point in the directive but it is never reached.

Answer 1

You haven't actually applied your "wc-tab" directive to any elements.
Try adding the directive to your tab anchor elements:
<a wc-tab showTab="" href="#menu1">Menu 1</a>
Check that the showTab attribute is correct as well. If it is a directive then it should be applied as show-tab="".