How to receive first element from ng-repeat, if I use controller in directive?

Question

I'm trying to implement tabs to my page using ng-repeat. But I can't display first by default. Here is my HTML code:

<div ng-show="tab.isSet(project)" ng-repeat="project in projects">
    <img ng-src="{{project.images[0]}}" alt="" class="img-responsive project-img"><br>
    <p>{{project.description}}</p>
    <p ng-show="project.website.page">
        See here: <a href="{{project.website.page}}" target="_blank">{{project.website.name}}</a>
    </p>
</div>

Variable projects is an array of object. I need display first of this project by default.

digitApp.directive('aboutTab', function() { 
  return { 
    restrict: 'E', 
    templateUrl: 'js/directives/aboutTab.html',
    controller  : function () {
                this.tab = 1; // I need to fix this code but I have no idea how
                this.isSet = function (checkTab) {
                    return this.tab === checkTab;
                };
                this.setTab = function (activeTab) {
                    this.tab = activeTab;
                };
    },
    controllerAs: "tab" 
  }; 
});

Answer 1

I haven't tested this, but I would try to do something similar like this:

digitApp.directive('aboutTab', function() { 
  return { 
    restrict: 'E', 
    templateUrl: 'js/directives/aboutTab.html',
    scope: {
        someModel: '=',
        someString: '@',
        someMethod: '&',
        tabIndex: '=',
        isSet: '&',
        setTab: '&'
    },
    controller: function () {
                this.someModel = null;
                this.someString = '';
                this.tabIndex = null;
                this.isSet = null;
                this.toggleTab = function (activeTab) {
                    if (!this.isSet) this.isSet = true
                    else this.isSet = false
                };
    },
    controllerAs: "tab" 
  }; 
});

And you can try something like:

<div ng-repeat="project in projects">
    <about-tab ng-show="tab.isSet(project)" someModel="project.someModel" someMethod="project.someMethod(tab.someVar)" someString="{{project.somestring}} can be here" tabIndex="project.index" isSet="false" toggleTab="tab.toggleTab(project.toggle)"></about-tab>
</div>