smart-table toggle-hide-column reusable component attempt

directive.js

function hideColumn () {
	var template = '<span ng-transclude></span>' +
		'<button ng-click="hideColumn()">Hide</button>'

	function link (scope, element, attrs ) {
		scope.hideColumn = function () {
			console.log('Called');
			var label	= '[label=' + scope.label + ']';
			var element = angular.element(label);
			var index 	= element.index() + 1;
			var td 		= "td:nth-child(" + ( index ) + ")";

			element
				.hide()
				.parents( "table" )
				.find( "td:nth-child(" + ( index ) + ")"  )
				.addClass( "column-hidden" )
				.hide();
			
			function onClick () {
				var controls = 
				element
					.show()
					.parents( "table" )
					.find( "td:nth-child(" + ( index ) + ")"  )
					.removeClass( "column-hidden" )
					.show();

				$( 'i' + label ).remove( );
			}

			/**  */
			var nextCol = element.next();
			var prevCol = element.prev();
			var nextBtn = '<i class="ion-arrow-right-b" label="' + scope.label + '"></i>';
			var prevBtn = '<i class="ion-arrow-left-b" label="' + scope.label + '"></i>';
			/** */

			prevCol.append( angular.element(prevBtn).click(onClick) );
			nextCol.prepend( angular.element(nextBtn).click(onClick) );
		};
	}

	return {
		restrict: 'A',
		scope:{
		  label: '@'
		},
		transclude: true,
		template: template,
		link: link
	}
}

angular.module('app')
	.directive('ssToggleHideColumn', hideColumn);

tpl.html

<h3> Affiliation </h3>

<div class="row">
	<div class="col-md-3 col-md-off-set-4">
		<select class="form-control" ng-change="show(selectedColumn)" ng-model="selectedColumn" ng-options="column for column in hiddenColumns">
			<option value="" disabled> Select a hidden column to show </option>
		</select>
	</div>

	<div class="dropdown col-md-4">
		<button type="button" class="btn btn-default" data-toggle="dropdown" ng-hide="isHidden('name') && isHidden('founder') && isHidden('dateFounded')">
			Bulk Actions
			<i class="ion-arrow-down-b"></i>
		</button>

		<ul class="dropdown-menu" role="menu" aria-labelledby="bulk-actions">
			<li role="presentation">
				<a href="" ng-click="">
					<i class="ion-trash-a"></i>
					Delete
				</a>
			</li>
		</ul>
	</div>
</div>

<table st-table="affiliations" class="table table-striped">
	<thead>
		<tr>
			<th ss-toggle-hide-column label="actions"> Actions </th>
			<th ss-toggle-hide-column label="name"> <i class="ion-ios7-minus-outline"></i> <span st-sort="name"> Name </span> </th>
			<th ss-toggle-hide-column label="founder"> <i class="ion-ios7-minus-outline"></i> <span st-sort="founder"> Founder </span> </th>
			<th ss-toggle-hide-column label="dateFounded"> <i class="ion-ios7-minus-outline"></i> <span st-sort="dateFounded"> Date Founded </span> </th>
		</tr>

		<tr>
			<th colspan="1"></th>
			<th> <input type="text" class="form-control" st-search="'name'"></th>
			<th> <input type="text" class="form-control" st-search="'founder'"></th>
			<th> <input type="text" class="form-control" st-search="'dateFounded'"></th>
		</tr>
	</thead>

	<tbody>
		<tr st-select-row="affiliation" st-select-mode="multiple" ng-repeat="affiliation in affiliations track by $index">
			<td>
				<a ui-sref="main.affiliation.edit({ id: affiliation.id })"> <i class="ion-compose"></i> </a>
			</td>
			<td ng-bind="affiliation.name"> Name </td>
			<td ng-bind="affiliation.founder"> Founder </td>
			<td ng-bind="affiliation.dateFounded | date: 'MMMM d, yyyy'"> Date Founded </td>
		</tr>
	</tbody>
</table>