AngularJS Directive Scope

HTML

<div ng-app="lukasRutuely">
  <div ng-controller="Ctrl3">
    Parent title :<br>
    <input ng-model="title"> => {{title}}
    <hr>
    <div tab-directive></div>
  </div>
</div>

JavaScript

function Ctrl3($scope) {
  $scope.title = 'My relevant lobo';
  $scope.displayTitle = function() {
    return $scope.title;
  }
}

angular.module('lukasRutuely', [])
  .directive('tabDirective', function() {
    return {


      template: '<table style="width:100%"> <tr > <th ng-repeat="x in names">{{x.name}}</th> </tr> <tr> <td>Golf</td> <td>VW</td> </tr> <tr> <td>Boxter</td> <td>Porche</td> </tr> </table>',
      link: function(scope, iElement) {
        scope.names = [{
          name: 'Cars'
        }, {
          name: 'Brand'
        }]
      }

    }
  });