AngularJS 1.4. Directive example with multiple title params

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

app.config(['$compileProvider', function ($compileProvider) {
  // disable debug info
  $compileProvider.debugInfoEnabled(false);
}]);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.data = [
    {title:'Hola Amigo', title_type:'h1'},
    {title:'Hola Hermano', title_type:'h2'},
    {title:'Hello Friend', title_type:'h1'},
    {title:'Hello Brother', title_type:'h2'}
  ]
});

app.directive('cardDirective', function() {
        return {
          restrict: 'E',
          replace: true,
          transclude: true,
          templateUrl: 'card_template.html',
          scope: {
            header: '=',
            headline: '@',
            headerText: '@',
            width: '@' //two columns, three columns, etc
          }
        }
      });

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.8" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <h1>Hello {{name}}!</h1>
    <hr>
 
    <div ng-repeat="card in data track by $index">
       <card-directive headline="{{card.title_type}}" header-text="{{card.title}}"></card-directive>
    </div>
    
    <script type="text/ng-template" id="card_template.html">
    <div class="card">
      <div class="card--Title" ng-switch on="headline">
          <h1 ng-switch-when="h1">{{::headerText}}</h1>
          <h2 ng-switch-when="h2">{{::headerText}}</h2>
          <span ng-switch-default>{{::headerText}}</span>
      </div>
    </div>
    </script>
    
  </body>

</html>

/* Put your css in here */

.card{
  border:1px solid #f0f0f0;
  padding:20px;
  border-radius:5px;
  margin:20px;
}