Angular element remove does not work ?

Question

I have a service which is responsible for show a loading bar on the screen. I add the loading bar dynamically like this

coreModule.provider('$loading', function () {
    this.$get = ['$document', function ($document) {

        var element = angular.element('<div id="loading" class="loading">' + '<img src="../styling/img/loading.gif" alt="loading .... ">' + '</div>');

        return {
            inProgress:function (message) {

                $document.find('body').append(element);
            },

            finish:function () {
//                $document.find('body').remove(element);     <- does not work 
//                $document.find('body').remove('#loading');   <- neither this one does !!
            }
        }
    }];
});

However finish function does work at all. It does remove the element from the body. Any ideas ?

Answer 1

You can use element.remove() - see http://docs.angularjs.org/api/angular.element for the available jQueryLight methods.