title: AngularJS scopes
body: <p>I have a weird case of angular scope mixup. Here's the plnkr: <a href="http://plnkr.co/edit/o8cyZXkHX8Lt9Vkbn0xm" rel="nofollow">http://plnkr.co/edit/o8cyZXkHX8Lt9Vkbn0xm</a></p>
  
  <p>The transcluded scope does not resolve <code>appCtrl.testString</code>, which is strange, because transcluded content should have the outside scope. What's even more strange is that <code>num</code> gets resolved correctly.</p>
  
  <p>Also, <code>data-test-attr</code> gets the correct value on the element that <code>ng-controller</code> is defined.</p>
  
  <p>This is a minimal working example, so solutions with reordering the elements or defining a scope in a different place do not really suit me. I'd rather hack the <code>repeatedDirective</code> somehow, if that's at all possible.</p>
  
  <p>Here's the code:</p>
  
  <p><code>index.html</code></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="app"&gt;
  
    &lt;head&gt;
      &lt;script data-require="angular.js@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"&gt;&lt;/script&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;repeated-directive ng-repeat="num in [1, 2, 3, 4, 5]" ng-controller="AppController as appCtrl" data-test-attr="{{appCtrl.testString}}"&gt;
        &lt;div&gt;{{num}} - {{appCtrl.testString}}&lt;/div&gt;
      &lt;/repeated-directive&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><code>script.js</code></p>
  
  <pre><code>angular.module('app', [])
    .controller('AppController', AppController)
    .directive('repeatedDirective', repeatedDirective);
  
  function AppController($scope) {
    this.testString = 'Controller value';
  }
  
  function repeatedDirective() {
    return {
      transclude: true,
      template: '&lt;div ng-transclude&gt;&lt;/div&gt;'
    };
  }
  </code></pre>