directive month day picker

For month summary view.

by merganser

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div seasonpicker="test" ng-model="text"></div>

JavaScript

var myApp = angular.module('myApp', []);

myApp
    .directive('seasonpicker', ['$document', '$compile', 
		function ($document, $compile) {
      'use strict';
      return {
        require: '?ngModel',
        restrict: 'A',
        link: function ($scope, elem, attrs, ngModel) {
          var
			  pickerid = attrs.id ? attrs.id : 			  
					Math.floor((1 + Math.random()) * 0x10000)
					.toString(16)
					.substring(1),
              placeholder = attrs.placeholder ? attrs.placeholder : 'Select Season...',
              inputTemplate = '<input 
									 id="pickerInput_"+pickerid
									 type="text" 
									 role="button"
									 data-toggle="dropdown"
									 data-target="#"
									 value=placeholder
									 />',
              template ='<div id="pickerDropdown_'+pickerid+'" class="dropdown">'+
							inputTemplate +
							'<ul '+
								'id="pickerTabs_'+pickerid+'"'+
								'class="dropdown-menu" '+
								'role="menu" '+
								'aria-labelledby="pickerInput" '+
							'>'+

								'<!-- TABS -->'+
								'<ul class="nav nav-tabs">'+
									'<li class="active"><a href="#single_'+pickerid+'" data-toggle="tab">Single Month</a></li>'+
									'<li><a href="#multiple_'+pickerid+'" data-toggle="tab">Month Range</a></li>'+
									'<li><a href="#custom_'+pickerid+'" data-toggle="tab">Custom Range</a></li>'+
								'</ul>'+
								
								'<!-- TAB PANES -->'+
								'<div class="tab-content">'+
									'<div class="tab-pane active" id="single_'+pickerid+'">Single asdfasdfsda</div>'+
									'<div class="tab-pane" id="multiple_'+pickerid+'">Month asdfafas</div>'+
									'<div class="tab-pane" id="custom_'+pickerid+'">Custom asdfdas</div>'+
								'</div>'+
							
							'</ul>'+
						'</div>',
			  
              seasonpickerTemplate = angular.element(template),
              pickerTabs = seasonpickerTemplate.find('#pickerTabs_'+pickerid),
              pickerDropdown =...