Referencing DOM nodes in Angular expressions is disallowed
<p>I started to work with directives and everything went well so far. But right now I'm stuck. I get an error <code>Error: [$parse:isecdom] Referencing DOM nodes in Angular expressions is disallowed! Expression: report.getContent()</code> and I don't see what kind of DOM node I'm referencing. Maybe I'm just dump!?</p>

<p>I've a scope function with will get a <code>report</code> instance:</p>

<pre><code>$scope.showReport = function() {
            reportFactory.getLatestReport().then(function(report) {
                $scope.report = report;
            });
        };
</code></pre>

<p>My <code>report</code> object:</p>

<pre><code>// report.js
return function(data) {
    return {
        content: new Content(data['content']),

        getContent: function() {
            return content;
        }
    }
};
</code></pre>

<p>The template which is in place will then call (?) a directive: </p>

<pre><code>&lt;div ng-show="report"&gt;
  &lt;my-report&gt;&lt;/my-report&gt;
&lt;/div&gt;
</code></pre>

<p>myReport directive:</p>

<pre><code>.directive('myReport', function() {
        return {
            templateUrl: 'report/report'
        };
    })
</code></pre>

<p>The returned template contains a directive as well:</p>

<pre><code>&lt;my-report-content content="report.getContent()"&gt;&lt;/my-report-content&gt;
</code></pre>

<p>MyReportContent directive:</p>

<pre><code>.directive('myReportContent', function() {
        return {
            templateUrl: 'report/content',
            scope: {
                content: '='
            }
        };
    })
</code></pre>

<p>Report template (<code>report/content</code>), but not working correctly since the error is thrown:</p>

<pre><code>&lt;div ng-if="content.hasFoo()"&gt;
  &lt;div ng-include="'report/foo'"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;div ng-if="!content.hasFoo()"&gt;
  &lt;div ng-include="'report/bar'"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>