为什么angular $scope不删除旧值?

我有以下控制器

angular.module('publicApp')
  .controller('URLSummaryCtrl', function ($scope, $location, Article, $rootScope, $timeout) {
    $scope._url = "";
    $scope._title = "";
    $scope._article = "";
    $scope._authors = "";
    $scope._highlights = [];
    $scope._docType = "";
    $scope.summarizeURL = function(){
        Article.getArticleInfo($scope.url, "").then(
            function(data){
                $scope._url = data.url;
                $scope._title = data.title;
                $scope._authors = data.authors.join(', ');
                $scope._highlights = data.highlights;
                $scope._docType = data.documentType;
                if($scope._docType == 'html'){
                    $scope._article = data.article[0].article;
                }
                else{
                    $scope._article = data.article;
                }
                var _highlights = [];
                $scope._highlights.forEach(function (obj) {
                    _highlights.push(obj.sentence);
                });
                // wait for article text to render, then highlight
                $timeout(function () {
                    $('#article').highlight(_highlights, { element: 'em', className: 'highlighted' });
                }, 200);
            }
        );
    }

和下面的视图

<form role="form" ng-submit="summarizeURL()">
    <div class="form-group">
      <input id="url" ng-model="url" class="form-control" placeholder="Enter URL" required>
    </div>
    <button class="btn btn-success" type="submit">Summarize</button>
  </form>
<div class="col-lg-8">
  <h2>{{ _title }}</h2>
  <p> <b>Source: </b> <a href="{{_url}}" target="_blank">{{_url}}</a></p>
  <p> <b>Author: </b> {{_authors}} </p>
  <p> <b>Article: </b><p id="article">{{_article}}</p></p>
</div>

当我最初在文本字段中给出url并单击摘要时，它按预期工作。但是当我更改文本字段中的值并再次单击按钮时，每件事都正确更新了新值，但是$scope._article获得新值并且不删除旧值。它同时显示原来的新值和旧值

为什么会发生这种情况?

EDIT #1:我添加了更多的代码。我发现当我移除$timeout(function(){...})部分时，它按预期工作。那么现在的问题是，为什么$scope._article保留旧的值并把新值放在前面?

编辑2:我发现$timeout(...)不是问题。如果我改变

$timeout(function () {
    $('#article').highlight(_highlights, { element: 'em', className: 'highlighted' });
}, 200);

$('#article').highlight(_highlights, { element: 'em', className: 'highlighted' });

它的行为还是一样的。现在我假设这是因为我改变了$作用域。文章是别的东西吗?发生的事情是，我正在显示$scope._article的值，然后修改显示的内容，以包含我想要突出显示的<em class='highlighed'> ... </em>。

编辑#3:我试图在请求获得新数据之前删除添加的html，但这也不起作用。这是我试过的代码。

angular.module('publicApp')
  .controller('URLSummaryCtrl', function ($scope, $location, Article, $rootScope, $timeout) {
    $scope._url = "";
    $scope._title = "";
    $scope._article = "";
    $scope._authors = "";
    $scope._highlights = [];
    $scope._docType = "";
    $scope.summarizeURL = function(){
        //Remove added html before making call to get new data
        $('.highlighted').contents().unwrap();
        Article.getArticleInfo($scope.url, "").then(
            function(data){ ... }
        );