title: Not able to scroll to the bottom of my div element with Angular.js
body: <p>I have a div which is fixed to the right side of the browser window. Within that div is a container that holds div elements that propagate with ng-repeat.  The data contained in these div elements are messages from the response to an HTML request.  For some reason I am not able to make this container scroll to the bottom of the container once the div elements have propagated.  I have tried using $location with $anchorScroll, and I have tried doing it manually with plain javascript getElementByID.  I understand the request happens asynchronously, and I have tried using promises and timeouts, but for some reason I am not able to get this div to scroll automatically.</p>
  
  <p>Below is all the pertinent code, If someone would be able to point me in the right direction, I would be much appreciative!</p>
  
  <p>Here is my Jade:</p>
  
  <pre><code>ul.dropdown-menu
    li(ng-repeat="group in groups")
     a(ng-click="loadGroup(group.id)") {{group.name}}
  
  
  div(class='messages-container')
    .message-box(ng-repeat="message in messageIndex.messages| orderBy:'created_at'")
  </code></pre>
  
  <p>Here is my css:</p>
  
  <pre><code>.messages-container {
     margin-bottom: 100px;
     width: 700px;
     height: 600px;
     overflow-y: scroll;
     display: block;
  </code></pre>
  
  <p>Here is my controller:</p>
  
  <pre><code>app.controller('GroupMeCtrl',
    ['$scope', '$http', '$templateCache', '$location', 'Auth', 'MyMessageLoad',
    function($scope, $http, $templateCache, Auth, MyMessageLoad) {
  
      $scope.loadGroup = function($groupID){
        $scope.messageIndex = new MyMessageLoad();
        $scope.messageIndex.nextPage($groupID);
      };
  }]);
  </code></pre>
  
  <p>here is my factory:</p>
  
  <pre><code>app.factory('MyMessageLoad', function($http, $templateCache) {
  
    var MessageLoad = function() {
      this.messages = [];
      this.beforeID = '';
    };
  
    MessageLoad.prototype.nextPage = function($groupID) {
  
      var urlString = 'https://api.groupme.com/v3/groups/' + $groupID + '/messages?'+ this.beforeID;
      $http({method: 'GET', url: urlString}).success(function(data) {
          var messages = data.response.messages;
          for (var i = 0; i &lt; messages.length; i++) {
              this.messages.push(messages[i]);
          }
          this.beforeID = "&amp;before_id=" + this.messages[this.messages.length - 1].id;
      }.bind(this));
    };
  
  return MessageLoad;
  </code></pre>
  
  <p>});</p>
  
  <p>And here is the Javascript that fixes the div to the right side of the browser window, just in case there is interference with something important:</p>
  
  <pre><code>sidebarwidth = $(".sidebar-width").css('width');
  bodypaddingtop = $(".navbar-fixed-top").css('height');
  sidebarheight = $("body").css('height');
  $('.sidebar-nav-fixed').css('width', sidebarwidth);
  $('.sidebar-nav-fixed').css('height', sidebarheight);
  $('body').css('paddingTop', bodypaddingtop);
  contentmargin = parseInt(sidebarwidth);
  $('.span-fixed-sidebar').css('marginLeft', contentmargin);
  $('.span-fixed-sidebar').css('paddingLeft', 60);
  </code></pre>