ng-show, ng-hide not working in directive template

[OHB]

Hello! I'm trying to make a reusable spinner directive so I can hide sections of the page with a spinner before data is loaded:

myModule.directive('spinner', function() {
    return {
        template: '<div ng-hide="{{variable}}">SPINNER!!!</div><div ng-show="{{variable}}" ng-transclude></div>',
        replace: false,
        transclude: true,
        controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) {
            $scope.variable = $attrs.spinner;
        }]
    };
});

I attach it like this:

Angular turns it into:

<div ng-controller="careerStatsCtrl" class="sidebar ng-scope" spinner="careerStats">
    <div ng-hide="careerStats" style="">SPINNER!!!</div><div ng-show="careerStats" ng-transclude="" style="display: none;">
    <!--contents-->
    </div>
</div>

Show/Hide just doesn't work...and I know that careerStats is being set in the careerStatsCtrl controller. If I add the following in the html directly, it works:

<div ng-show="careerStats">SHOW</div><div ng-hide="careerStats">HIDE</div>

Anyone have an idea?

[OHB]

I found an alternate method to do this since I couldn't figure out the initial problem.

myApp.directive('spinner', function() {
    return {
        restrict: 'A',
        controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) {
            var spinner = $('<div class="spinnerContainer"><div class="spinner"></div></div>').insertAfter($element);
            spinner.hide().fadeIn("slow");
            $element.hide();
            $scope.$watch($attrs.spinner, function(data) {
                if (data) {
                    spinner.fadeOut("slow");
                    $element.fadeIn("slow");
                } else {
                    spinner.fadeIn("slow");
                    $element.fadeOut("slow");
                }
            });
        }]
    };
});

Use spinner="scopeVariableToWatchForTruthiness" on the element you want to spinnify.

[newtriks]

Show/hide should indeed work, my thoughts are its simply down to your incorrect use of curly-brace bindings i.e. {{variable}}. Remove those and it should work fine: ng-show="variable"

[gregkerzhner]

This is much, much later but I think this is related to this: #1459