Creating an ajax loading spinner using a directive in Angularjs

I'm trying to create a simple loader. Below is what I have done so far. Could someone please take a look and let me know where I'm going wrong?

It appears the CSS styles loading style-2 are not being added. my DOM just shows:

<span class=""></span>

My directive:

angular.module('loaderModule', [
    'restangular',
])

.controller('appLoaderController', ['$scope', function ($scope) {
    $scope.$on('LOAD', function () {
        $scope.loading = "loading style-2"
    });
    $scope.$on('UNLOAD', function () {
        $scope.loading = ""
    });
}])

.directive('spinLoader', function() {
    return {
        restrict: 'E',
        transclude: true,
        template: '<span class="{{ loading }}"></span><div ng-transclude ></div>'
    };
});

HTML:

<spin-loader>
    <div ui-view></div>
</spin-loader>

I then just use it by calling: $scope.$emit('LOAD')