Improve Angular Tabs directive - angularjs

Question

I created an angular tab directive width JQuery.
I can't find the problem with it because all seems right.
Could someone check what am I doing wrong?
I think my Angular directive is to dependent of jQuery.
What steps should I take to make it more "Angular"?
angular.module('app', []);
angular.module("app").directive("tabs", function() {
return {
restrict: "A",
link: function(scope, element, attributes) {
var tabs = element.find("a");
var sections = links.map(function() {
return $("#" + this.href.split("#")[1])
});
$(tabs[0]).show();
sections[0].show();
tabs.bind("click", function(event) {
event.preventDefault();
tabs.not(this).hide();
$(this).siblings("a").hide();
$.each(sections, function() {
$(this).hide()
});
$("#" + this.href.split("#")[1]).show();
});
}
};
});
ul.tabs {
list-style: none;
margin: 0;
padding: 0;
}
ul.tabs li {
display: inline-block;
margin: 0;
padding: 0;
}
ul.tabs li a {
text-decoration: none;
color: white;
padding: 8px;
display: block;
background-color: indigo;
}
div.section {
background-color: #f0f0f0;
padding: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<ul class="tabs">
<li>Tab 1
</li>
<li>Tab 2
</li>
</ul>
<div id="section1" class="section">Section 1</div>
<div id="section2" class="section">Section 2</div>

Answer 1

I'm not going to try fixing your code. Just explain how you would do this the Angular way.
jQuery is all about DOM manipulation. In Angular, DOM manipulation is bad. The DOM should automatically adapt itself based on the model. Tabs can simply be implemented the following way:
<ul class="tabs">
<li><a href ng-click="selectedTab = 1">Tab 1</a>
</li>
<li><a href ng-click="selectedTab = 2">Tab 2</a>
</li>
</ul>
<div class="section" ng-show="selectedTab === 1">Section 1</div>
<div class="section" ng-show="selectedTab === 2">Section 2</div>
This is much simpler: clicking on a tab changes the value of the selectedTab model value. The sections hide/show themselves based on the value of selectedTab.

Answer 2

Can be something like:
angular.module("app").directive("tabs", function() {
return {
restrict: "A",
scope: {
tabs: '='
},
template : '<ul><li ng-repeat="section in tabs" ng-click="handleClick(section)" ng-class="{selected : section.selected}">{{section.name}}</li></ul>',
link: function(scope, element, attributes) {
scope.handleClick = function(section) {
//....
}
}
};
});
where tabs is array like [{name : 'N1', href : '#smth', selected: false}, ...] in html:
<div tabs="tabs"></div>
You can add selected property, disabled, etc. Also notice - that if you change tabs array - template will redraw itself automatically.