Issue with isolated scope and "replace: true" in angular directive
<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>