title: Why do Angular (1.5) components always have an isolated scope?
body: <p>I'm building an Angular library that provides a bunch of components that should make it easier to build SPA application on top of a certain API. For some components we're using the multi-slot transclusions feature. Multi-slot transclusions and components were introduces in the AngularJS 1.5 release. </p>
  
  <p>I really like both features, but I don't understand why components always have an isolated scope. I would like to control how variables are accessible in my transcluded template. But now I can't, because I can't control the scope. This basically means I have to tell the users of my library to reference the parent scope first in order to get to the data they need.</p>
  
  <p>Does anyone know a workaround?, or maybe I'm doing it wrong. Then please tell me :-)</p>
  
  <p>So this is my component: </p>
  
  <pre><code>export const ProductsListComponent =
  {
      transclude: {
          'template' : '?productListItemTemplate'
      },
      templateUrl: 'app/components/products-list/products-list.html',
      controller: ProductsListComponentController,
      bindings: {
          list: '='
      }
  }
  
  ... 
  
  angular.module('MyWebApplication', ['ngMessages', 'ui.router' ])
      .component( 'productList', ProductsListComponent )  
  
  ... 
  </code></pre>
  
  <p>Here's the template HTML:</p>
  
  <pre><code>&lt;div class="product-list-wrapper" ng-repeat="$product in $ctrl.list"&gt;
      &lt;ng-transclude ng-transclude="template"&gt;
          &lt;product-list-item product="$product"&gt;&lt;/product-list-item&gt;
      &lt;/ng-transclude&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is how it can be used. And you see my problem. The expression must begin with <strong>$parent.</strong>$product.title, because the component scope is contained.</p>
  
  <pre><code>&lt;product-list list="search.products"&gt;
      &lt;product-list-item-template&gt;
         &lt;h2&gt;{{$parent.$product.title}}&lt;/h2&gt;
      &lt;/product-list-item-template&gt;
  &lt;/product-list&gt;
  </code></pre>