将鼠标悬停在Angular JS中的一个元素上，并将Class添加到另一个元素中

尝试使用以下jQuery方法：但这在我的Angular环境中不起作用，假设因为我试图在Angular JS范围方法之外执行此操作，但我不知道如何使用Angular范围方法来实现这一点（Angular的新方法）有什么建议吗？

      $('.song-thumb .hover-play').on('mouseenter', function(e) {
        var elem = $('section.suggestedAlbums img');
        elem.trigger(e.type);
        elem.addClass('hoverclass');
      });
      $('.song-thumb .hover-play').on('mouseleave', function(e) {
        var elem = $('section.suggestedAlbums img');
        elem.trigger(e.type);
        elem.removeClass('hoverclass');
      });
      var count = 0;
      $('section.suggestedAlbums img').hover(function() {
        count++;
        $('[remove]').html('<label remove><br>It triggers the hover event(' + count + ') too.<br></label>');
      });

整页代码：

    <script>
          $('.song-thumb .hover-play').on('mouseenter', function(e) {
            var elem = $('section.suggestedAlbums img');
            elem.trigger(e.type);
            elem.addClass('hoverclass');
          });
          $('.song-thumb .hover-play').on('mouseleave', function(e) {
            var elem = $('section.suggestedAlbums img');
            elem.trigger(e.type);
            elem.removeClass('hoverclass');
          });
          var count = 0;
          $('section.suggestedAlbums img').hover(function() {
            count++;
            $('[remove]').html('<label remove><br>It triggers the hover event(' + count + ') too.<br></label>');
          });
    </script>
<!-- <h2>{{trackListData.listTitle}}</h2>
 --><div ng-repeat="track in trackListData.tracks track by $index " class="feature-item-homepage fade-animate-nostagger">
    <div class="song-thumb" ng-class="{active: $root.currentPlaying.song_id == track.id}">
        <!--3 Cases-->
        <!--Not the song being played-->
        <div class="hover-play" ng-if="$root.currentPlaying.song_id != track.id" ng-click="$root.playSong(track);">
            <i class="fa fa-plus add-to-playlist" ng-init="playlistOption = false" ng-click="$root.initPlaylistOption($event, track.id); $event.stopPropagation();"></i>
            <i class="fa fa-play play-song"></i>
            <img src="img/producer_icon_white.png" class="prod_logo">
            <div class="song-title" style="width: 80%;padding-top:25px;">
            <a class="song-linking" href="#/song/{{track.id}}">
                <h4>{{track.title}}</h4>
                <h5>{{track.artist.user_name}}</h5>
            </a>
            </div>
        </div>
        <!--The current song but paused-->
        <div class="hover-play" ng-if="$root.currentPlaying.song_id == track.id && !$root.isPlaying" play-music>
            <i class="fa fa-plus add-to-playlist" ng-init="playlistOption = false" ng-click="$root.initPlaylistOption($event, track.id); $event.stopPropagation();"></i>
            <i class="fa fa-play play-song"></i>
        </div>
        <!--The current song but playing-->
        <div class="hover-play" ng-if="$root.currentPlaying.song_id == track.id && $root.isPlaying" pause-music>
            <i class="fa fa-plus add-to-playlist" ng-init="playlistOption = false" ng-click="$root.initPlaylistOption($event, track.id); $event.stopPropagation();"></i>
            <i class="fa fa-pause pause-song"></i>
        </div>
        <img ng-src="{{(track.albums[0].album_picture? $root.fileServer +'uploads/' + track.albums[0].album_picture:(track.artist.profile_picture? $root.fileServer +'uploads/' + track.artist.profile_picture:'img/defaultalbum.png'))}}" />
    </div>
<!--  <div class="song-title-wrap">
    <div class="song-title">
        <a class="song-linking" href="#/song/{{track.id}}">
            <h4>{{track.title}}</h4>
            <h5>{{track.artist.user_name}}</h5>
        </a>
    </div>
    </div> -->
</div>