AngularJS Using @name to target different named attribute

docs example for transclude, updated with explicit scope assignment for title.

by johnwun

HTML

<div ng-app="transclude">
  <div ng-controller="Ctrl">
    <input ng-model="title"><br>
    <textarea ng-model="text"></textarea> <br/>
    <pane title2="{{title}}">{{text}}</pane>
  </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<style>
.ng-invalid { border: 1px solid red; }

JavaScript

function Ctrl($scope) {
  $scope.title = 'Lorem Ipsum';
  $scope.text = 'Neque porro quisquam est qui dolorem ipsum quia dolor...';
}

angular.module('transclude', [])
 .directive('pane', function(){
    return {
      restrict: 'E',
      transclude: true,
      scope: { title3:'@title2' },
      template: '<div style="border: 1px solid black;">' +
                  '<div style="background-color: gray">{{title3}}</div>' +
                  '<div ng-transclude></div>' +
                '</div>'
    };
});