How to define javascript inside directive template

Question

Below is my tabbed window please suggest me where to provide the javascript for the below menu inside the template of the directive.

below is my directive

app.directive('basictabs', function() {
    return {

  restrict: 'AE',
  replace: true,
 template :'<div class="tab-menu">\
     <ul>\
     <li class="unselected"><a href="#">Tab 01</a></li>\
     <li class="selected"><a href="#">Tab 02</a></li>\
     <li class="unselected"><a href="#">Tab 03</a></li>\
     <li class="unselected"><a href="#">Tab 04</a></li>\
     </ul>\
     <div class="tab-content">\
      <div class="tab-01">\
       Content in Tab 01 goes here.\
      </div>\
      <div class="tab-02">\
       Content in Tab 02 goes here.\
      </div>\
      <div class="tab-03">\
       Content in Tab 03 goes here.\
      </div>\
      <div class="tab-04">\
       Content in Tab 04 goes here.\
      </div>\
   </div>\
   </div>'     
  };
});

Answer 1

Link Function

We use the link option to create a directive that manipulates the DOM. The link function is optional. If the compile function is defined, it returns the link function; therefore, the compile function will overwrite the link function when both are defined. If our directive is simple and doesn’t require setting any additional options, we may return a function from the factory function (callback function) instead of an object. When doing so, this function will be the link function.

The link function has the following signature:

link: function (scope, element, attrs) {

// manipulate the DOM in here

}

scope

The scope to be used by the directive for registering watches from within the directive.

element

The instance element is the element where the directive is to be used. We should only manipulate children of this element in the postLink function, since the children have already been linked.

attrs

The instance attributes are a normalized (pascalCased) list of attributes declared on this element and are shared between all directive linking functions. These are passed as JavaScript objects.

You can use JQuery within the link function for manipulating the DOM like as shown in the example

Working Demo

app.directive('basictabs', function() {
    return {
        restrict: 'AE',
        replace: true,
        template: '<div id="tabs">\
            <ul>\
                <li><a href="#tabs-1">Tab 1</a></li>\
                <li><a href="#tabs-2">Tab 2</a></li>\
                <li><a href="#tabs-3">Tab 3</a></li>\
            </ul>\
            <div id="tabs-1">\
                <p>Content for Tab 1</p>\
            </div>\
            <div id="tabs-2">\
                <p>Content for Tab 2</p>\
            </div>\
            <div id="tabs-3">\
                <p>Content for Tab 3</p>\
            </div>\
          </div>',
        link: function(scope, elm, attrs) {
            var jqueryElm = $(elm[0]);
            $(jqueryElm).tabs()
        }
    };
})