Javascript JSON Stringify在<；中未正确标识；预处理>；标签

我试图在Javascript对象上使用JSON.stringify（）函数，但是第一个大括号上的缩进看起来不正确。第一行是缩进的，但是其他的看起来都很好。我做了一些研究，关于StackOverflow的另一个答案建议使用

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);

我的HTML代码：

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


{{data}}

浏览器中实际呈现的内容（拍摄快照）：

在
之前有缩进，而
意味着应该在渲染中保留缩进。尝试：

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


{{data}}

因此，数据位于行的开头。或者将
仅放在JSON范围周围


{{data}}
标记将呈现所有空白，包括您在代码中添加的换行符和制表符。试着把它全部放在一行而不是一行上谢谢！成功了。为什么标记的缩进本身会影响文本在浏览器中的呈现方式？
表示在呈现块时保留块中的所有空白。这包括
和
标记前的空格。
<div class="loader"></div>
    <pre pams-content-load id="json-data"><span>{{ data }}</span></pre>
</pre>