AngularJS scope of a directive in an include

AngularJS scope of a directive in an include

How would I get my directive to update properly based on a variable on the
parent scope?
I have an animation directive that I want to use for showing loading for
individual grids of data that will need to be populated by doing a service
call. I currently have a main template for a page and I have an ng-include
for a certain "widget" I want to show on the page. The widget will either
show the div with the populated information or the loading directive will
show, at least that's what I was trying to get it to do.
The code:
//One approach to the directive
myApp.directive('loading', function() {
return {
restrict: "E",
scope : {
test : '='
},
link : function(scope, element, attrs) {
scope.$watch('test', function(newValue, oldValue) {
if (newValue) {
if (!scope.$$phase || !scope.$root.$$phase)
scope.$apply(); //Do I need this since the scope
is two-way bound?
}
});
},
templateUrl: 'partials/loading-animation.html'
};
});
The html for the include, which includes the directive also. loadVal is a
variable on the scope of the parent controller. loadVal changes based on a
service call and is updated properly.
<div style="display:none;" class='address store'>
<span></span>
<span></span>
</div>
<loading test="loadVal" ng-show="test"></loadingStuff>
Right now, if I just have the directive only, it still does not show up. I
have tried it using ng-switch, but since there's no route change it shows
both the loading directive and the address information. I've also tried
showing either based on whether one is true or false (!loadVal and
loadVal), the problem is though it doesn't seem to know what "!loadVal" is
because it never displays the html that ng-show="!loadVal" is on.