ng-show not working in a directive

Question

I can't get ng-show on my spinningElement to work. I have an isolated scope, for the directive, but since it is an element inside I'd think it should work?

Anyone have an Idea of what I am doing wrong?

Code snippet:

angular.module('lr.upload.directives').directive('uploadButton', [
    'upload',
    function(upload) {
        return {
            restrict: 'EA',
            scope: {
                data: '=?data',
                url: '@',
                param: '@',
                method: '@',
                onUpload: '&',
                onSuccess: '&',
                onUploadTest: '&',
                onError: '&',
                onComplete: '&'
            },
            link: function(scope, element, attr) {
                scope.uploading=false;
                var el = angular.element(element);
                var fileInput = angular.element('<input type="file" />');
                var spinningElement = angular.element('<img ng-show="uploading" class="uploadSpinner" src="../../img/loading.gif" />');
                el.append(fileInput);
                el.append(spinningElement);

Solution:

angular.module('lr.upload.directives').directive('uploadButton', [
    'upload', '$compile',
    function(upload, $compile) {
        return {
            restrict: 'EA',
            scope: {
                data: '=?data',
                url: '@',
                param: '@',
                method: '@',
                onUpload: '&',
                onSuccess: '&',
                onUploadTest: '&',
                onError: '&',
                onComplete: '&'
            },
            link: function(scope, element, attr) {
                scope.uploading = false;
                var el = angular.element(element);
                var fileInput = angular.element('<input type="file" />');
               var spinningElement = $compile('<img ng-show="uploading" class="uploadSpinner" src="../../img/loading.gif" />')(scope);
                el.append(fileInput);
                el.append(spinningElement);

Answer 1

I think you should use $compile for make it work

var spinningElement = $compile('<img ng-show="uploading" class="uploadSpinner" 
src="../../img/loading.gif" />')(scope);