title: Issue with isolated scope and "replace: true" in angular directive
body: <p>I have been struggling with a scoping issue when making an error message directive using AngularJS.</p>
  
  <p>I have an ng-if and ng-class directive as part of the directive template, but the expression in the ng-class directive always seemed to return a blank string, unless:</p>
  
  <ol>
  <li>I removed the ng-if directive.</li>
  <li>or, I removed the 'replace' key in the directive definition object.</li>
  </ol>
  
  <p>Looking at the compiled output for my directive, it looks like an isolated scope is being created if the ng-if or the replace key is removed, but if they are both left in, then there are no ng-isolate-scope classes in the html output, just ng-scope.</p>
  
  <p>I would really like to understand exactly what is going on here and would be grateful for any explanations.</p>
  
  <p><strong>Directive Definition</strong></p>
  
  <pre><code>angular.module('myMessages')
  .directive('pageMessages', function() {
  
      return {
          restrict: 'E',
          replace: true,
          scope: {
              messages: '='
          },
          controller: function($scope) {
              $scope.severity = 'alert-success';
          },
          template: '&lt;div ng-if="messages.length &gt; 0"&gt;' +
                      '&lt;div class="alert" ng-class="severity"&gt;' + 
                          '&lt;ul&gt;' + 
                              '&lt;li ng-repeat="m in messages"&gt;{{::m.message}}&lt;/li&gt;' +
                          '&lt;/ul&gt;' +
                      '&lt;/div&gt;' +
                    '&lt;/div&gt;'
      };
  });
  </code></pre>
  
  <p><strong>Output (note no alert-danger class is added)</strong></p>
  
  <pre><code>&lt;!-- ngIf: messages.length &gt; 0 --&gt;
  &lt;div ng-if="messages.length &gt; 0" messages="messages" class="ng-scope"&gt;
      &lt;div class="alert" ng-class="severity"&gt;
          &lt;ul&gt;
          &lt;!-- ngRepeat: m in messages --&gt;
              &lt;li ng-repeat="m in messages" class="ng-binding ng-scope"&gt;test error&lt;/li&gt;
          &lt;!-- end ngRepeat: m in messages --&gt;&lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- end ngIf: messages.length &gt; 0 --&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>alert-danger class is added after removing replace (removing ng-if would work as well)</strong></p>
  
  <pre><code>&lt;page-messages messages="messages" class="ng-isolate-scope"&gt;
      &lt;!-- ngIf: messages.length &gt; 0 --&gt;
      &lt;div ng-if="messages.length &gt; 0" class="ng-scope"&gt;
          &lt;div class="alert alert-danger" ng-class="severity"&gt;
              &lt;ul&gt;
              &lt;!-- ngRepeat: m in messages --&gt;
                  &lt;li ng-repeat="m in messages" class="ng-binding ng-scope"&gt;test error&lt;/li&gt;
              &lt;!-- end ngRepeat: m in messages --&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- end ngIf: messages.length &gt; 0 --&gt;
  &lt;/page-messages&gt;
  </code></pre>