angularjs + material

When clicking the "CLICK ME" button it will change the initial 3-line-item lists results to one entry. But when it is doing this, it will add one entry at the bottom before the rest disappear. Then when clicking the button again, it will show entries briefly, before the 2nd one disappears again. Not the expected outcome :/

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.0/angular-material.min.css">
<link href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.0/angular-material.min.css" rel="stylesheet"/>
<body layout="row" ng-app="mainApp" ng-controller="mainCtrl" ng-cloak>
  <md-sidenav>
  </md-sidenav>
  <main layout="column" flex aria-hidden="false">
    <md-toolbar layout-padding class="app-toolbar">
    </md-toolbar>
    <md-content ng-ref="container" md-scroll-y flex>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porta, tellus vitae ultricies lacinia, ante ante tempus libero, id pharetra lacus magna nec odio. Donec a interdum ipsum. Nam a luctus diam, vel ornare tortor. Morbi lobortis lectus sed urna mollis, eu facilisis velit lacinia. Sed volutpat congue gravida. Fusce tempus augue id lacus rutrum iaculis. In quis mauris tristique, mollis ipsum eu, feugiat ligula. Curabitur in tellus dignissim, blandit mi et, pulvinar ex. Nunc euismod ante eu tortor imperdiet scelerisque. Ut eget libero erat. Vivamus consectetur luctus consequat. In hac habitasse platea dictumst. Donec laoreet in orci a tempus. Duis non sodales leo. Phasellus semper, lorem eu finibus lacinia, metus ante sagittis lorem, non lacinia ligula diam in metus.

      Nam iaculis neque est, at malesuada diam scelerisque id. Nulla lacinia sagittis diam sed luctus. In commodo sit amet ligula egestas faucibus. Aenean sit amet lorem ut lacus consequat sollicitudin sit amet sit amet libero. Sed facilisis augue quis commodo convallis. Aliquam scelerisque malesuada sapien, quis cursus sem accumsan quis. Fusce fringilla felis sit amet eros volutpat malesuada a ac sapien. Ut id ullamcorper tellus. Pellentesque tellus ante, volutpat at quam in, ultrices faucibus massa. Fusce tristique leo ac odio accumsan elementum. Quisque in lorem sit amet libero vulputate cursus quis a ligula.

      Donec dapibus fringilla ante, id feugiat velit tincidunt nec. Nunc...

CSS

.scroll-to-top {
  position: fixed !important;
  background-color: red !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.expand-up {
  font-size: 40px !important;
  color: white;
}

JavaScript

angular.module('mainApp', ['ngMaterial']);
angular.module('mainApp')
  .controller('mainCtrl', function($scope, $window) {
    $scope.scrollTop = function(container) {
      console.log(container)
      $window.document.querySelector('md-content').scrollTop = 0;
    };
  });

angular
  .module("mainApp")
  .directive("scrollToTop", function($window) {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        const parent = element.parent();
        angular.element(parent).bind("scroll", function(event) {
          if (event.target.scrollTop > 0) {
            element.css({
              visibility: 'visible'
            });
          } else {
            element.css({
              visibility: 'hidden'
            });
          }
        });
      }
    }
  });