Доступ к области действия контроллера из включенного контента

Я работаю над своим первым приложением Angular (ура!). Я пытаюсь создать общий модальный компонент, который может объявлять заголовок, настраиваемый контент и любые кнопки действий. Затем следует фоновая настройка, затем мои вопросы внизу.

Вот как я хотел бы использовать директиву.

<!-- in app/views/library/index.html -->
<!-- outside <modal> #i_work works great -->
<select id="i_work">
  <option value="{{libraryType.id}}" ng-repeat="libraryType in libraryTypes">{{libraryType.name}}</option>
</select>

<modal id="library_new" title="My Custom Title">
  <form>
    <!-- inside <modal> #i_dont_work doesn't work -->
    <select id="i_dont_work">
      <option value="{{libraryType.id}}" ng-repeat="libraryType in libraryTypes">{{libraryType.name}}</option>
    </select>
  </form>

  <modal-buttons>
    <!-- [toggle-modal] is another directive that shows/hides a given <modal> -->
    <button type="button" toggle-modal="library_new">cancel</button>

    <button type="submit" ng-click="addLibrary()">save</button>
  </modal-buttons>
</modal>

Вот код директивы:

// in app/scripts/directives/modal.js
'use strict';
angular.module('sampleAngularApp')
  .directive('modal', [function () {
    return {
      templateUrl: '/scripts/directives/modal.html',
      restrict: 'E',
      transclude: true,
      link: {
        pre: function preLink(scope, element, attrs) {
          scope.id = attrs.id;
          scope.title = attrs.title;
        },
        post: function preLink(scope, element, attrs) {
          // hacky-hack to transclude specific content into other targets.
          //   bound event handlers should be preserved (as implemented they are).
          //   this actually works
          var buttonWrap = element.find('modal-buttons');
          buttonWrap.children().each(function (index, button) {
            element.find('.modal-footer').append(button);
          });
          buttonWrap.remove();
        }
      }
    };
  }]);

... и шаблон директивы:

<!-- in app/scripts/directives/modal.html -->
<div class="modal" role="dialog">
  <div class="modal-header">
    <span class="title">{{title}}</span>
    <button type="button" class="close" toggle-modal="{{id}}">close</button>
  </div>

  <!-- the contents of .modal-body should be everything inside <modal> above, -->
  <!--   except for <modal-buttons> -->
  <div class="modal-body" ng-transclude />

  <!-- the contents of .modal-footer should be the contents of <modal-buttons> -->
  <div class="modal-footer" />
</div>

Вопросы:

1) Рассмотрим элементы <select> в представлении контроллера выше. #i_work отображается правильно с <option>s просто отлично. #i_dont_work отображает <select> без <option>. libraryTypes, кажется, не входит в область действия внутри <modal>. Почему это так, и как я могу это исправить?

2) Есть ли лучший способ включить определенный контент в несколько целей? Проект Google Polymer предоставляет <content /> необязательный атрибут [select] для предоставления нескольких целей вставки. В Angular есть что-то подобное? (Дополнительную информацию см. на веб-сайте Polymer.)