Why did the model Array here not update in the DOM after updating in the Controller?

Question

http://plnkr.co/edit/7OnKAGvVNXWLwN5fZqJu?p=preview

I'm setting up a question related to infinite scroll and noticed that when I update the $scope.tags array I have once the tags have been scrolled all the way up, that the tags don't actually update.

In my project I use a service to grab new data, however in this example I'm just resetting the values inside of the tags array.

Why did it not update in the DOM?

Markup:

<section id="tags-col" class="tag-column column">
    <ul id="tags-panel-list">
        <li ng-repeat="tag in tags">
            <div class="tag">{{tag.term}}</div>
        </li>
    </ul>
</section>

<div>{{tags}}</div>

Controller:

// Tags panel Controller:
TagsPanelCtrl.$inject = ['$scope', '$timeout'];
function TagsPanelCtrl($scope, $timeout) {

  var tagsCol = document.getElementById("tags-col");

  $scope.tags = [
    { term: "tag1" },
    { term: "tag2" },
    { term: "tag3" },
    { term: "tag4" },
    { term: "tag5" },
    { term: "tag6" },
    { term: "tag7" },
    { term: "tag8" },
    { term: "tag9" },
    { term: "tag10"},
    { term: "tag1" },
    { term: "tag2" },
    { term: "tag3" },
    { term: "tag4" },
    { term: "tag5" },
    { term: "tag6" },
    { term: "tag7" },
    { term: "tag8" },
    { term: "tag9" },
    { term: "tag10"}
  ];

  var scrollingElement =  function(event) {
    console.log(tagsCol.scrollHeight - tagsCol.scrollTop);

    if ((tagsCol.scrollHeight - tagsCol.scrollTop) === tagsCol.offsetHeight) {
      console.log('reached bottom!');

      // Here you reach the bottom of the column,
      // and I attempt to update the tags array
      $scope.tags = [
        { term: "tag1" },
        { term: "tag2" },
        { term: "tag3" },
        { term: "tag4" },
        { term: "tag5" },
        { term: "tag6" },
        { term: "tag7" },
        { term: "tag8" },
        { term: "tag9" },
        { term: "tag10"},
        { term: "tag11"},
        { term: "tag12"},
        { term: "tag13"},
        { term: "tag14"},
        { term: "tag15"},
        { term: "tag16"},
        { term: "tag17"},
        { term: "tag18"},
        { term: "tag19"},
        { term: "tag20"},
        { term: "tag21"},
        { term: "tag22"},
        { term: "tag23"},
        { term: "tag24"},
        { term: "tag25"},
        { term: "tag26"},
        { term: "tag27"},
        { term: "tag28"},
        { term: "tag29"},
        { term: "tag30"}
      ];
    }
  };

  document.getElementById('tags-col').addEventListener('scroll', scrollingElement);

}

Answer 1

You need to call $scope.apply() after your update because your event / code is outside of the digest cycle.. here you go:

// Code goes here

/*global angular*/
(function() { "use strict";

    var app = angular.module('tagsApp', [
        'tagsPanelDirective'
    ])
    .controller('DashCtrl', Controller)
    Controller.$inject = ['$scope'];

    function Controller($scope) {

      /** Init DashCtrl scope */
      /** ------------------- */
    }
})();

(function() { "use strict";

    angular
        .module('tagsPanelDirective', [])
        .directive('tagsPanel', directive);

    function directive () {
        var directive = {
            templateUrl: "tagsPanel.html",
            restrict: "E",
            replace: true,
            bindToController: true,
            controller: TagsPanelCtrl,
            controllerAs: 'tgspnl',
            link: link,
            scope: {}
        };
        return directive;
        function link(scope, element, attrs) {
        }
    }

    // Tags panel Controller:
    TagsPanelCtrl.$inject = ['$scope', '$timeout'];
    function TagsPanelCtrl($scope, $timeout) {

      var tagsCol = document.getElementById("tags-col");

      $scope.tags = [
        { term: "tag1" },
        { term: "tag2" },
        { term: "tag3" },
        { term: "tag4" },
        { term: "tag5" },
        { term: "tag6" },
        { term: "tag7" },
        { term: "tag8" },
        { term: "tag9" },
        { term: "tag10"},
        { term: "tag1" },
        { term: "tag2" },
        { term: "tag3" },
        { term: "tag4" },
        { term: "tag5" },
        { term: "tag6" },
        { term: "tag7" },
        { term: "tag8" },
        { term: "tag9" },
        { term: "tag10"}
      ];

      var scrollingElement =  function(event) {
        // tagsCol.scrollTop = tagsCol.scrollHeight;

        // console.log(tagsCol.scrollTop);
        // console.log(tagsCol.scrollHeight);
        console.log(tagsCol.scrollHeight - tagsCol.scrollTop);
        // console.log(tagsCol.offsetHeight);

        if ((tagsCol.scrollHeight - tagsCol.scrollTop) === tagsCol.offsetHeight) {
          console.log('reached bottom!');

          $scope.tags = [
            { term: "tag1" },
            { term: "tag2" },
            { term: "tag3" },
            { term: "tag4" },
            { term: "tag5" },
            { term: "tag6" },
            { term: "tag7" },
            { term: "tag8" },
            { term: "tag9" },
            { term: "tag10"},
            { term: "tag11"},
            { term: "tag12"},
            { term: "tag13"},
            { term: "tag14"},
            { term: "tag15"},
            { term: "tag16"},
            { term: "tag17"},
            { term: "tag18"},
            { term: "tag19"},
            { term: "tag20"},
            { term: "tag21"},
            { term: "tag22"},
            { term: "tag23"},
            { term: "tag24"},
            { term: "tag25"},
            { term: "tag26"},
            { term: "tag27"},
            { term: "tag28"},
            { term: "tag29"},
            { term: "tag30"}
          ];

          $scope.$apply()
        }
      };

      document.getElementById('tags-col').addEventListener('scroll', scrollingElement);

    }
})();

http://plnkr.co/edit/CX7D4RnTx8pyjNzNKK7U