Loadable Directive for Angularjs

Loadable.js

'use strict';


Application.Directives.directive("loadable", function() {
    return {
        restrict: "A",
        templateUrl: "/partials/loading/loadable.html",
        transclude: true,
        scope: {
          loadable: "@"  
        },
        link: function(scope, element, attrs) {
           

            scope.$watch('loadable', function(newValue, oldValue) {
                if (newValue === "true") {
                    $(element).find('.loadable-content').fadeTo(0.1, 0);
                }
                
                if (newValue === "false") {
                    $(element).find('.loadable-content').fadeTo(100, 1);
                }
            });
        }
    };
});

loading

<div>
    <div class="ajax-loader" style="text-align: center" ng-show="loadable === 'true'">
        <img src="/Assets/img/bar-loading.gif" /><br />
    </div>

    <div class="loadable-content" ng-cloak ng-transclude ng-show="loadable === 'false'">
        
    </div>
</div>