нажмите открыть все входные данные. Может ли директива быть полезной?

angular.module("myDiscuss", [])
  .controller("TabController", function() {
    this.tab = 0;
    this.subTab = 0;
    this.like = 0;
    this.selectLike = function(setTab) {
      this.like = setTab;
    };
    this.selectTab = function(setTab) {
      this.tab = setTab;
    };
    this.selectSubTab = function(setTab) {
      this.subTab = setTab;
    };
    this.isSelected = (function(checkTab) {
      return this.tab === checkTab;
    });
    this.isSelectedSub = (function(checkTab) {
      return this.subTab === checkTab;
    });
    this.isSelectedLike = (function(checkTab) {
      return this.like === checkTab;
    });

  });

<div class="thumbnail" style="border-radius: 0px;" ng-controller="TabController as tabs">
  <ul class="nav nav-pills">
    <li role="presentation" ng-class="{ active:like === 1 }">
      <a href ng-click="tabs.selectLike(1)" class="glyphicon glyphicon-thumbs-up">Helpful</a>
    </li>
    <li ng-class="{ active:tab === 2 }">
      <a href ng-click="tabs.selectTab(2)" class="glyphicon">Comment</a>
    </li>
  </ul>
  <div class="panel" ng-show="tabs.isSelected(2)">
    <blockquote>
      <img src="../images/cover.jpg" class="img-reponsive pull-left">
      <div style="overflow: hidden;">
        <h4>Name</h4>
        <p>.......</p>
      </div>
      <div ng-show="tabs.isSelectedSub(3)">
        <small>....</small>
      </div>
      <ul class="nav nav-pills">
        <li ng-class="{ active:subTab === 3 }">
          <a href ng-click="tabs.selectSubTab(3)" class="glyphicon ">Helpful</a>
        </li>
        <li ng-class="{ active:subTab === 4}">
          <a href ng-click="tabs.selectSubTab(4)" class="glyphicon">Reply</a>
        </li>
      </ul>
      <div style="overflow:hidden" ng-show="tabs.isSelectedSub(4)">
        <img src="../images/cover.jpg" class="img-reponsive pull-left">
        <input class="col-sm-8 col-md-8 col-lg-11" type="text">
      </div>
    </blockquote>
    <blockquote>
      <img src="../images/cover.jpg" class="img-reponsive pull-left">
      <div style="overflow: hidden;">
        <h4>Name</h4>
        <p>.......</p>
      </div>
      <div ng-show="tabs.isSelectedSub(3)">
        <small>....</small>
      </div>
      <ul class="nav nav-pills">
        <li ng-class="{ active:subTab === 3 }">
          <a href ng-click="tabs.selectSubTab(3)" class="glyphicon ">Helpful</a>
        </li>
        <li ng-class="{ active:subTab === 4}">
          <a href ng-click="tabs.selectSubTab(4)" class="glyphicon">Reply</a>
        </li>
      </ul>
      <div style="overflow:hidden" ng-show="tabs.isSelectedSub(4)">
        <img src="../images/cover.jpg" class="img-reponsive pull-left">
        <input class="col-sm-8 col-md-8 col-lg-11" type="text">
      </div>
    </blockquote>
  </div>