JSON Stringify not indenting properly in <pre> tag

Question

I'm trying to use the JSON.stringify() function on a Javascript object but the indentation on the first curly brace doesn't look correct. The first line is indented, but everything else looks fine. I did some research, and another answer on StackOverflow suggested to use the <pre> tag. Ideas?

My javascript code:

var result = {
    name: "Jim Cowart",
    location: {
        city: {
            name: "Chattanooga",
            population: 167674
        },
        state: {
            name: "Tennessee",
            abbreviation: "TN",
            population: 6403000
        }
    },
    company: "appendTo",
};

$scope.data = JSON.stringify(result, null, 2);

My HTML code:

<pre content-load id="json-data">
    <div class="loader"></div>
    <span>{{ data }}</span>
</pre>

What actually renders in the browser (took a snapshot):

Answer 1

You have indentation before <span>, and <pre> means that this should be preserved in the rendering. Try:

<pre pams-content-load id="json-data">
    <div class="loader"></div>
    <span>
{{ data }}</span>
</pre>

so that the data is at the beginning of the line. Or put <pre> only around the JSON span.

<div class="loader"></div>
    <pre pams-content-load id="json-data"><span>{{ data }}</span></pre>
</pre>