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](https://stackoverflow.com/questions/21595774/remove-html-element-on-click-in-angular-js) and [this](https://stackoverflow.com/questions/29133454/how-to-remove-contents-of-a-div-with-angular) and [this](https://stackoverflow.com/questions/25209325/how-remove-content-whit-angularjs). 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: 
How about:

```
myEl.empty()

```

Taken from [SO Question](https://stackoverflow.com/questions/652917/in-jquery-want-to-remove-all-html-inside-of-a-div)
What is your api returning, an array of objects?
Try this

```
$scope.getSongs = function(){

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

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

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

    });

```