angularjs loading directive works part of the time - angularjs

Question

In order to standardize loading warnings, and avoid changes in a page when http ajax requests come back and change $scope item values, I set up a simple directive to wrap an element and add "loading" to it.
<loading><div>My content here</div></loading>
This is converted into:
<div><div ng-hide="!ready"><div>My content here</div></div> <div ng-hide="ready">Loading...</div></div>
Pretty straightforward. Then in my controller, I just need to set $scope.ready = true; when everything ajax-y is loaded.
Here is my simple directive:
.directive('loading',function () {
return {
restrict: 'E',
template: '<div><div ng-transclude ng-hide="!ready"></div><div ng-hide="ready">Loading</div></div>',
transclude:true,
replace:true
};
})
Problem is that it works consistently for one page and not the other, even though their layouts are identical.
When examining with firebug, it appears that the one that doesn't work has class="ng-hide" on the first element, as if $scope.ready was never set to true. Of course, both Firebug breakpoints and console logs show that it was set to true.
My suspicion is a scope issue, or possibly how Angular is applying the value of scope changes, but not sure?
UPDATE:
I added messages for when the value of the element gets changed inside the directive, and when it is getting changed in the controller:
// directive
link: function ($scope) {
$scope.$watch('ready',function (newval,oldval) {
console.log("ready changed from "+oldval+" to "+newval);
});
}
// controller
console.log("changing $scope.ready to true");
$scope.ready = true;
For the one that works, I get the following messages:
setting $scope.ready to true
ready changed from undefined to true
For the one that did not, I get the following messages:
setting $scope.ready to true
The directive is not being notified about the change. Is this a scope issue?
HTML:
I really stripped down the html, still managed to recreate the problem:
<!-- THIS ONE HAS THE PROBLEM -->
<loading>
<h3>{{item.name}} Second Page</h3>
</loading>
<!-- THIS ONE IS JUST FINE -->
<loading>
<h3>{{item.name}}</h3>
</loading>
Leads me to believe it must be something in the controller? The routes are basically identical, except for their loading different template html files and different controller names.
UPDATE:
scopes are identical. I had the console messages spit out $scope.$id from inside each controller and from inside the link function (and inside the watch, which is not getting called anyways for the bad one). In all cases, all 3 $id are the same (004) for the page that works, and all 3 $id are the same (006) for the page that does not.
ANOTHER:
setting the directive to isolate scope with scope:{ready:'=ready'} (i.e. 2-way binding has the same effect. Using text binding # makes the whole directive not run correctly.
Apparently, it depends entirely on the ID of the item. I load this via URL /items/:item. If the Item is one that I pre-seeded in the database, so probably has an ID like "40", it all works, both for item type 1 and for item type 2. If it is an auto-generated hex ID for a new item created on the fly, like "8474b2486ee6", then it stumbles and doesn't load.
Finally... if I hit the Back button in the browser, for a second it actually shows!