Remove content from div angular

Question

This shouldn't be difficult, but after reading lots of examples I still cannot find the answer, or figure it out, at least in any sort of elegant way. I have read a lot of answers on SO, like this and this and this. Strangely enough I couldn't find anything to help.

What am I doing and trying to achieve?

I am calling an API which is returning a set of chords and lyrics. This works perfectly when I call the API once, but when I search again the chords and lyrics are appended at the end of the div. Can anyone advise on what angular method or solution I should use to remove content from the div before it is populated with new data?

Here is the code I am currently using:

$scope.getSongs = function(){

    $http({
        url: 'http://api.guitarparty.com/v2/songs/?query=' + $scope.song,
        dataType: 'json',
        method: 'GET'
    }).success(function(response){
        var myEl = angular.element( document.querySelector( '#chords' ) ); 

      ////something needs to go here...../////

        myEl.append(response.objects[0].body_chords_html);

    });

Answer 1

How about:

myEl.empty()

Taken from SO Question