Tabs directive click event breakpoint not firing

Here is my HTML content:

<ul id="tabs" class="nav">
    <li class="active">
        <a href="#tab1" tabsMenu>Overview</a>
    </li>
    <li>
        <a href="#tab2" tabsMenu>Prospect</a>
    </li>
    <li>
        <a href="#tab3" tabsMenu >Account</a>
    </li>
    <li>
        <a href="#tab5" tabsMenu >Script</a>
    </li>
    <li>
        <a href="#tab4" tabsMenu >Notes</a>
    </li>
    <li>
        <a href="#tab5" tabsMenu >History</a>
    </li>
</ul>

Here is my tabsMenu directive:

angular.module('directives.tabsMenu', [])

    .directive('tabsMenu', function() {
        return {
            // Restrict it to be an attribute in this case
            restrict: 'A',
            // Responsible for registering DOM listeners as well as updating the DOM
            link: function(scope, element, attrs) {

                element.bind('click', function(e) {
                    console.log('clicked');
                    e.preventDefault();
                    $(this).tab('show');
                });
            }
        };
    });

The break point in the click event is not hitting.

The normal jQuery code which works:

$('#tabs a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
});

I want to remove the jQuery code and use the directive, but it's not working. Why might this be?

tabsMenu is not a valid way of specifying a directive in HTML.

AngularJS looks for lower-case dash or underscore delimited and optionally x or data prefixed attribute names during normalization to determine which elements match which directives.

Try tabs-menu instead of tabsMenu:

<a href="#tab1" tabs-menu>Overview</a>